原創(chuàng)|使用教程|編輯:龔雪|2022-11-03 10:05:30.980|閱讀 183 次
概述:本文主要介紹DevExtreme原生的預(yù)定義主題樣式及如何使用,歡迎下載相關(guān)組件立即體驗(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提供Generic、Generic Compact和Material Design主題,這些主題有以下顏色可供選擇:
每個(gè)主題都是一個(gè)樣式表,其中包含CSS類的集合。以下樣式表是開箱即用的:
CSS主題旨在自定義基于HTML的UI組件,但是基于SVG的UI組件使用它們自己的主題來假定外觀與特定CSS主題相匹配。
要應(yīng)用主題,請(qǐng)?jiān)谒饕摰?lt;head>標(biāo)記中包含主題樣式表,您可以使用本地文件或從.獲取樣式表。
無需重新加載頁面
只有當(dāng)主題屬于同一個(gè)組時(shí),才可以使用此方法。例如,你可以從Generic Light切換到任何其他通用主題,但不能切換到Generic Compact或Material Design主題(參見預(yù)定義主題)。
1. 在index頁面中包含主題樣式表,如下所示,將應(yīng)用數(shù)據(jù)活動(dòng)屬性設(shè)置為true的主題。在下面的代碼中,它是Generic Light:
<head> <!-- Generic themes --> <link rel="dx-theme" data-theme="generic.light" href="css/dx.light.css" data-active="true"> <link rel="dx-theme" data-theme="generic.dark" href="css/dx.dark.css" data-active="false"> <link rel="dx-theme" data-theme="generic.contrast" href="css/dx.contrast.css" data-active="false"> <!-- ... --> <!-- or Generic Compact themes--> <!-- link rel="dx-theme" data-theme="generic.light.compact" href="css/dx.light.compact.css" data-active="true" --> <!-- link rel="dx-theme" data-theme="generic.dark.compact" href="css/dx.dark.compact.css" data-active="false" --> <!-- link rel="dx-theme" data-theme="generic.contrast.compact" href="css/dx.contrast.compact.css" data-active="false" --> <!-- ... --> <!-- or Material Design themes--> <!-- link rel="dx-theme" data-theme="material.blue.light" href="css/dx.material.blue.light.css" data-active="true" --> <!-- link rel="dx-theme" data-theme="material.blue.dark" href="css/dx.material.blue.dark.css" data-active="false" --> <!-- link rel="dx-theme" data-theme="material.teal.light" href="css/dx.material.teal.light.css" data-active="false" --> <!-- ... --> </head>
2. 使用方法切換到主題,它從前面的代碼中接受數(shù)據(jù)主題屬性的值。如果使用SVG組件,還應(yīng)該調(diào)用 方法來更新它們的主題,下面的示例展示了如何應(yīng)用Generic Contrast主題:
DevExpress.ui.themes.current("generic.contrast"); // When using SVG components // DevExpress.viz.refreshTheme(); // ===== or when using modules ===== import { themes } from "devextreme/ui/themes"; themes.current("generic.contrast"); // When using SVG components // import { refreshTheme } from "devextreme/viz/themes"; // refreshTheme();
重要提示:如果注意到主題外觀有任何問題,請(qǐng)將初始化routine移到 方法。
使用頁面重新加載
這種方法適用于在任何主題之間切換,但它涉及到頁面重新加載:
1. 在index頁面中包含主題樣式表,如下所示。語法與前面指令的第1步相同,但是對(duì)于所有主題,數(shù)據(jù)活動(dòng)屬性都被設(shè)置為false。
<head> <!-- ... --> <link rel="dx-theme" data-theme="generic.light" href="css/dx.light.css" data-active="false"> <link rel="dx-theme" data-theme="generic.light.compact" href="css/dx.light.compact.css" data-active="false"> <link rel="dx-theme" data-theme="material.blue.light" href="css/dx.material.blue.light.css" data-active="false"> <!-- ... --> </head>
2. 在中保存目標(biāo)主題的名稱并重新加載頁面:
var switchTheme = function(themeName) { window.localStorage.setItem("dx-theme", themeName); window.location.reload(); }
3. 在頁面加載時(shí),恢復(fù)主題名稱并將其傳遞給方法。如果在window.localStorage中找不到主題名稱,還可以指定要應(yīng)用的主題。在下面的代碼中,它是Material Blue Light主題。
DevExpress.ui.themes.current(window.localStorage.getItem("dx-theme") || "material.blue.light"); // ===== or when using modules ===== import themes from "devextreme/ui/themes"; themes.current(window.localStorage.getItem("dx-theme") || "material.blue.light");
重要提示:如果注意到主題外觀有任何問題,請(qǐng)將初始化routine移到 方法。
調(diào)色板是與主題配色方案一起使用的次級(jí)配色方案,您可以使用它們以不同的方式對(duì)應(yīng)用程序的部分進(jìn)行樣式化,例如,當(dāng)導(dǎo)航側(cè)邊欄應(yīng)該是深色而內(nèi)容區(qū)域應(yīng)該是淺色時(shí)。
顏色調(diào)色板是由帶特定選擇器前綴的限定范圍的CSS規(guī)則定義的:dx-swatch-xxx(例如,dx-swatch-green),要將調(diào)色板應(yīng)用到HTML文檔的某個(gè)部分,請(qǐng)按以下方式封裝該部分:
<div> This content applies the primary color scheme <div class="dx-swatch-dark"> This content applies the "dark" color scheme </div> </div>
重要提示:調(diào)色板應(yīng)該屬于與主應(yīng)用程序主題相同的主題(Generic, Generic Compact或Material),例如,如果主應(yīng)用程序主題是Material,則只能使用基于Material主題的調(diào)色板。
您可以使用DevExtreme CLI或ThemeBuilder UI生成調(diào)色板:
下面的命令生成一個(gè)新的自定義調(diào)色板,它使用Generic Dark作為基礎(chǔ)主題:
> devextreme build-theme –-base-theme="generic.dark" --make-swatch --output-color-scheme="dark" // ===== or without installing DevExtreme CLI globally ===== > npx -p devextreme-cli devextreme build-theme –-base-theme="generic.dark" --make-swatch --output-color-scheme="dark"
該命令的結(jié)果是一個(gè)dx.generic.dark.css文件,其中每個(gè)規(guī)則都以.dx-swatch-dark CSS selector為前綴。將文件移動(dòng)到應(yīng)用程序文件夾,注冊(cè)它,并將swatch類添加到頁面元素。
單擊工具欄上的Export來打開Theme Export pop-up對(duì)話框,輸入調(diào)色板的名稱,選中Save as a color swatch復(fù)選框,然后執(zhí)行最后一步。
單擊Download CSS File,將CSS文件保存到本地。
將生成的CSS文件移動(dòng)到應(yīng)用程序文件夾,注冊(cè)它,并將swatch類添加到頁面元素。
注意:調(diào)色板不能用于定制的基于SVG的UI組件,因?yàn)閁I組件的主題不是使用CSS的UI組件配置。通過預(yù)定義的CSS主題,基于SVG的UI組件可以檢測(cè)頁面上使用的是哪個(gè)主題,并應(yīng)用相應(yīng)的UI組件配置。當(dāng)基于SVG組件位于調(diào)色板內(nèi)時(shí),檢測(cè)是不可能的,但是您可以創(chuàng)建和應(yīng)用一個(gè)UI組件配置,使其在視覺上適配調(diào)色板。
DevExpress技術(shù)交流群6:600715373 歡迎一起進(jìn)群討論
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)