DevExpress v22.2官宣发布,支持.NET 7

DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:18100878085

B/S端界面控件DevExtreme中文使用指南——如何在应用中更好的使用图标库?

来源:   发布时间:2023-01-11   浏览:85次

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序,该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。

在本文中,我们将为大家介绍如何使用DevExtreme组件来将图像作为图标使用、使用外部的图标库等,欢迎下载最新版组件体验!

DevExtreme v22.2正式版下载

DevExpress技术交流群7:674691612      欢迎一起进群讨论

自定义图像作为图标

UI组件的icon属性接受URL,因此开发人员可以将图像的URL分配给它。但是最好用Base64类型来编码图像,以减少传输的数据量,可以在网上搜索一个图像到Base64转换器。

虽然Base64代码可以直接分配给icon属性,但由于它的长度,我们建议将它放在CSS中,将以下CSS规则添加到样式表中:

CSS

.dx-icon-customicon { // in Angular apps, add ::ng-deep before
background-image: url(data:image/png;base64,... LONG BASE64 CODE IS HERE ...);
background-repeat: no-repeat;
background-position: 0px 0px;
}

customicon这里是图标的名称,你应该分配给UI组件的icon属性。

此外,开发人员还可以为UI组件元素的不同状态提供特定的图标变体。在下面的代码中,为选定的选项卡提供了一个特殊的图标:

CSS

.dx-tab-selected .dx-icon-customicon {
background-image: url(data:image/png;base64,... LONG BASE64 CODE GOES HERE ...);
background-repeat: no-repeat;
background-position: 0px 0px;
}

从前面的示例中选择的类(如dx-tab-selected)没有记录,检查CSS规则,找出哪些类被添加到正在定制的UI组件元素中。

外部图标库

UI组件中的图标作为<i>元素插入到DOM中,当开发人员设置一个UI组件的icon属性时,它的值被用来形成<i>元素的class属性。例如,下面的代码…

icon: "home"

... 渲染到DOM,如下所示:

HTML

<i class="dx-icon dx-icon-home"></i>

这允许DevExtreme UI组件支持来自外部图标库的图标,前提是它们也应该在class属性中指定。

Font Awesome、Glyphicons和Ionicons就是这样的库,按照想要使用的库安装教程,按如下方式设置图标属性:

jQuery

JavaSciprt

$(function() {
$("#homeButton").dxButton({
icon: "fas fa-home" // Font Awesome 5
icon: "fa fa-home" // Font Awesome 4
icon: "glyphicon glyphicon-home" // Glyphicons
icon: "icon ion-md-home" // Ionicons
});
});

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().Button()
.Icon("fas fa-home") // Font Awesome 5
.Icon("fa fa-home") // Font Awesome 4
.Icon("glyphicon glyphicon-home") // Glyphicons
.Icon("icon ion-md-home") // Ionicons
)
SVG图标

除了字体图标外,DevExtreme还以SVG格式提供了相同的图标,开发人员可以在GitHub上的DevExtreme 存储库中找到SVG图标。

下面的代码使用了Button UI组件中的SVG图标,同样的技术可以用于任何其他具有icon属性的UI组件。

1. 使用图标的URL:

JavaSciprt

new DevExpress.ui.dxButton(targetElement, {
icon: "https://path/to/the/icon.svg"
});

2. 插入SVG内容inline:

JavaSciprt

new DevExpress.ui.dxButton(targetElement, {
icon: "<svg>SVG_CONTENT</svg>"
});

3. 导入图标:

JavaSciprt

import * as myIcon from "./assets/icon.svg";
new DevExpress.ui.dxButton(targetElement, {
icon: myIcon
});

重要提示:SVG格式允许运行可能是恶意的可执行代码,强烈建议您只使用可信来源的SVG图标。


更多DevExpress线上公开课、中文教程资讯请上中文网获取

DevExpress v22.2全新发布
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/3519.html

相关产品: DevExtreme跨平台开发框架,


联系我们
  • 重庆总部
  • 18100878085
  • 18100878085
购买
  • sales@evget.com
合作
  • business@evget.com


在线
客服
微信
QQ 电话
023-68661681
返回
顶部