B/S端界面控件DevExtreme内置的图标库介绍

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合使您可以利用现代Web开发堆栈包括ReactAngularASP.NET CorejQueryKnockout等构建交互式的Web应用程序该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。在本文中我们将为大家介绍如何使用DevExtreme组件内置的图标库类型。DevExpress新旧版本帮助文档下载可进QQ qun获取169725316内置图标库DevExtreme为所有DevExtreme主题提供了一个带有SVG和字体图标的图标库开发人员可以在UI组件和其他页面元素中使用图标也可以自定义它。可用的图标如下DevExtreme UI组件中的图标图标可以在那些具有图标属性的UI组件中使用例如Button UI组件在配置对象的第一层具有此属性下面代码示例中的图标取自内置图标库。jQueryJavaScrip$(function() { $(#saveButton).dxButton({ icon: save, text: Save }); });ASP.NET MVC ControlsRazor C#(Html.DevExtreme().Button() .Icon(save) .Text(Save) )许多默认模板也提供图标属性ContextMenu UI组件的默认项模板就是一个例子jQueryJavaScript$(function() { $(#contextMenuContainer).dxContextMenu({ // ... dataSource: [ { text: Zoom In, icon: plus }, { text: Share, icon: message }, { text: Download, icon: download } ] }); });ASP.NET MVC ControlsRazor 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)。HTMLi classdx-icon-email/i