B/S端界面控件DevExtreme中文使用指南——内置的图标库介绍

DevExpress技术交流群6：600715373      欢迎一起进群讨论

内置图标库

DevExtreme为所有DevExtreme主题提供了一个带有SVG和字体图标的图标库，开发人员可以在UI组件和其他页面元素中使用图标，也可以自定义它。

可用的图标如下：

DevExtreme UI组件中的图标

图标可以在那些具有图标属性的UI组件中使用，例如Button UI组件在配置对象的第一层具有此属性，下面代码示例中的图标取自内置图标库。

jQuery

JavaScript

$(function() {$("#saveButton").dxButton({icon: "save",text: "Save"});});

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().Button().Icon("save").Text("Save"))

许多默认模板也提供图标属性，ContextMenu UI组件的默认项模板就是一个例子：

jQuery

JavaScript

$(function() {$("#contextMenuContainer").dxContextMenu({// ...dataSource: [{ text: "Zoom In", icon: "plus" },{ text: "Share", icon: "message" },{ text: "Download", icon: "download" }]});});

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().ContextMenu().Items(i => {i.Add().Text("Zoom In").Icon("plus");i.Add().Text("Share").Icon("message");i.Add().Text("Download").Icon("download");}))

要查找支持图标的UI组件列表，请在左侧菜单中搜索“icon”。

其他HTML元素中的图标

如果HTML元素应该显示DevExtreme图标，请向其添加一个dx-icon-IconName类，建议使用内联HTML元素(<i>或<span>)。

HTML

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