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

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

自定义图像作为图标

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

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

CSS

.dx-icon-customicon { // in Angular apps, add ::ng-deep beforebackground-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 5icon: "fa fa-home" // Font Awesome 4icon: "glyphicon glyphicon-home" // Glyphiconsicon: "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});