翻譯|使用教程|編輯:龔雪|2022-11-17 11:18:16.130|閱讀 205 次
概述:本文主要介紹如何使用DevExtreme組件的ThemeBuilder(主題生成器)自定義主題,歡迎下載相關(guān)組件立即體驗(yàn)!
# 界面/圖表報表/文檔/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ù)編輯器等。
在上文中(點(diǎn)擊這里回顧>>),我們?yōu)榇蠹医榻B了如何開始使用DevExtreme內(nèi)置的主題生成器,在本文中我們將繼續(xù)為大家介紹如何使用這個主題生成器來自定義應(yīng)用程序主題。
開發(fā)人員創(chuàng)建或?qū)胫黝}后,ThemeBuilder會導(dǎo)航到可以自定義主題的主視圖。
主視圖由以下元素組成:
若要稍后返回自定義,請?zhí)崆氨4嬷黝}的元數(shù)據(jù)。單擊工具欄上的Export來打開Theme Export彈出對話框,在這個對話框中,輸入配色方案名稱。
跳轉(zhuǎn)到Choose Format步驟,然后單擊Download Metadata File按鈕。
一個包含元數(shù)據(jù)的.json文件保存在計算機(jī)上,開發(fā)人員可以選擇復(fù)制元數(shù)據(jù)。
要繼續(xù)自定義,請單擊工具欄上的Import,在調(diào)用的Theme Import對話框中,單擊Upload File并選擇前面導(dǎo)出的.json文件。如果開發(fā)人員復(fù)制了元數(shù)據(jù),而不是將其導(dǎo)出為.json文件,請將其粘貼到文本區(qū),然后單擊上傳元數(shù)據(jù):
單擊Export來打開Theme Export彈出對話框,在這個對話框中,輸入配色方案的名稱。如果要將主題導(dǎo)出為顏色樣本,請選中復(fù)選框,開發(fā)人員還可以刪除到外部資源的鏈接,例如字體。
在下一步中,選擇要支持的主題的組件。
單擊 Download CSS File來將文件命名為dx.[base-theme-name].[color-scheme-name].css (例如dx.material.brown.css)保存到計算機(jī)上。或者開發(fā)人員可以下載帶有CSS文件和圖標(biāo)的存檔,或者復(fù)制CSS。
開發(fā)人員自定義主題使用的圖標(biāo)和字體應(yīng)放置在主題旁邊,當(dāng)使用npm時,可以在node_modules/devextreme/dist/css中找到圖標(biāo)和字體文件夾。在其他情況下,這些文件夾位于具有預(yù)定義主題的目錄中,將它們復(fù)制到包含主題的目錄中。
最后,注冊導(dǎo)出的主題,如果導(dǎo)出了一個顏色板,請按照顏色板中的描述應(yīng)用它。
DevExpress技術(shù)交流群6:600715373 歡迎一起進(jìn)群討論
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)