翻譯|使用教程|編輯:龔雪|2022-12-22 11:24:53.760|閱讀 165 次
概述:本文帶大家了解DevExtreme控件如何自定義圖標(biāo),歡迎下載最新版控件體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
DevExtreme擁有高性能的HTML5 / JavaScript小部件集合,使您可以利用現(xiàn)代Web開發(fā)堆棧(包括React,Angular,ASP.NET Core,jQuery,Knockout等)構(gòu)建交互式的Web應(yīng)用程序,該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。
在本文中,我們將為大家介紹如何使用DevExtreme組件來自定義圖標(biāo),歡迎下載最新版組件體驗(yàn)!
DevExpress技術(shù)交流群6:600715373 歡迎一起進(jìn)群討論
由于DevExtreme圖標(biāo)是作為圖標(biāo)字體發(fā)布的,因此可以使用與自定義文本內(nèi)容相同的CSS屬性對它們進(jìn)行自定義:顏色、字體大小、字體粗細(xì)、文本對其等,這對于UI組件中使用的圖標(biāo)是正確的...
jQuery
HTML
<div id="saveButton"></div>
JavaSciprt
$(function() { $("#saveButton").dxButton({ icon: "save", text: "Save" }); });
CSS
#saveButton .dx-icon { font-size: 24px; color: blue; }
ASP.NET MVC Controls
... 以及用于任何其他HTML元素的圖標(biāo):
HTML
<i class="dx-icon-email dx-icon-custom-style"></i>
CSS
.dx-icon-custom-style { font-size: 24px; color: blue; }
dx-icon是一個CSS類,當(dāng)DevExtreme UI組件將圖標(biāo)元素呈現(xiàn)到DOM中時添加到圖標(biāo)元素中。開發(fā)人員不能用另一個名字來稱呼它,然而對于其他HTML元素中的圖標(biāo)則不是這樣的,在本例中,可以為類使用任何名稱,如前一個示例所示。
UI組件的icon屬性接受URL,因此開發(fā)人員可以將圖像的URL分配給它,但是最好用Base64類型來編碼圖像,以減少傳輸?shù)臄?shù)據(jù)量,可以在網(wǎng)上搜索一個圖像到Base64的轉(zhuǎn)換器。
雖然Base64代碼可以直接分配給icon屬性,但我們建議將它放在CSS中,因?yàn)樗拈L度。將以下CSS規(guī)則添加到樣式表中:
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這里是圖標(biāo)的名稱,應(yīng)該分配給UI組件的icon屬性。
此外,開發(fā)人員還可以為UI組件元素的不同狀態(tài)提供特定的圖標(biāo)變體,在下面的代碼中,為選定的選項(xiàng)卡提供了一個特殊的圖標(biāo):
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規(guī)則,找出哪些類被添加到正在定制的UI組件元素中。
UI組件中的圖標(biāo)作為<i>元素插入到DOM中,當(dāng)開發(fā)人員設(shè)置一個UI組件的icon屬性時,它的值被用來形成<i>元素的class屬性,例如,下面的代碼…
icon: "home"
... 渲染到DOM,如下所示:
HTML
<i class="dx-icon dx-icon-home"></i>
這允許DevExtreme UI組件支持來自外部圖標(biāo)庫的圖標(biāo),前提是它們也應(yīng)該在class屬性中指定。
Font Awesome、Glyphicons和Ionicons就是這樣的庫的例子,按照你想要使用的庫的安裝教程,按如下方式設(shè)置圖標(biāo)屬性:
jQuery
JavaScript
$(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 )
除了字體圖標(biāo)外,DevExtreme還以SVG格式提供了相同的圖標(biāo),開發(fā)人員可以再GitHub上的DevExtreme存儲庫中找到SVG圖標(biāo)。
下面的代碼使用了Button UI組件中的SVG圖標(biāo),同樣的技術(shù)可以用于任何其他具有icon屬性的UI組件。
1. 使用圖標(biāo)的URL:
JavaScript
new DevExpress.ui.dxButton(targetElement, { icon: "http://path/to/the/icon.svg" });
2. 插入SVG內(nèi)容inline:
JavaScript
new DevExpress.ui.dxButton(targetElement, { icon: "<svg>SVG_CONTENT</svg>" });
3. 導(dǎo)入圖標(biāo):
JavaScript
import * as myIcon from "./assets/icon.svg"; new DevExpress.ui.dxButton(targetElement, { icon: myIcon });
重要提示:SVG格式允許運(yùn)行可能是惡意的可執(zhí)行代碼,我們強(qiáng)烈建議您只使用可信來源的SVG圖標(biāo)。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)