提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:龚雪|2023-01-11 09:12:01.877|阅读 71 次
概述:本文带大家了解DevExtreme控件如何才能更好的使用各类图标库,欢迎下载最新版控件体验!
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序,该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
在本文中,我们将为大家介绍如何使用DevExtreme组件来将图像作为图标使用、使用外部的图标库等,欢迎下载最新版组件体验!
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 )
除了字体图标外,DevExtreme还以SVG格式提供了相同的图标,开发人员可以在GitHub上的中找到SVG图标。
下面的代码使用了Button UI组件中的SVG图标,同样的技术可以用于任何其他具有icon属性的UI组件。
1. 使用图标的URL:
JavaSciprt
new DevExpress.ui.dxButton(targetElement, { icon: "//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图标。
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn
文章转载自:慧都网本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
高性能HTML5/JavaScript开发框架,利用现代Web开发堆栈构建优异性能的应用程序。
DevExpress Universal Subscription行业领先的界面控件开发包,帮助企业构建卓越应用!
DevExpress DXperience Subscription高性价比的企业级.NET用户界面套包,助力企业创建卓越应用!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@cahobeh.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢