欧美亚洲三级,福利姬免费视频,国产女同另类

B/S端界面控件DevExtreme中文使用指南——如何使用預定義的主題樣式?

原創|使用教程|編輯：龔雪|2022-11-03 10:05:30.980|閱讀 165 次

概述：本文主要介紹DevExtreme原生的預定義主題樣式及如何使用，歡迎下載相關組件立即體驗！

相關鏈接：

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序，該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。

DevExtreme v22.1正式版下載

DevExtreme提供Generic、Generic Compact和Material Design主題，這些主題有以下顏色可供選擇：

通用主題

Material Design主題

每個主題都是一個樣式表，其中包含CSS類的集合。以下樣式表是開箱即用的：

CSS主題旨在自定義基于HTML的UI組件，但是基于SVG的UI組件使用它們自己的主題來假定外觀與特定CSS主題相匹配。

應用主題

要應用主題，請在索引頁的<head>標記中包含主題樣式表，您可以使用本地文件或從.獲取樣式表。

在運行時切換主題

無需重新加載頁面

只有當主題屬于同一個組時，才可以使用此方法。例如，你可以從Generic Light切換到任何其他通用主題，但不能切換到Generic Compact或Material Design主題（參見預定義主題）。

1. 在index頁面中包含主題樣式表，如下所示，將應用數據活動屬性設置為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. 使用方法切換到主題，它從前面的代碼中接受數據主題屬性的值。如果使用SVG組件，還應該調用方法來更新它們的主題，下面的示例展示了如何應用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();

重要提示：如果注意到主題外觀有任何問題，請將初始化routine移到方法。

使用頁面重新加載

這種方法適用于在任何主題之間切換，但它涉及到頁面重新加載：

1. 在index頁面中包含主題樣式表，如下所示。語法與前面指令的第1步相同，但是對于所有主題，數據活動屬性都被設置為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. 在中保存目標主題的名稱并重新加載頁面：

var switchTheme = function(themeName) {
window.localStorage.setItem("dx-theme", themeName);
window.location.reload();
}

3. 在頁面加載時，恢復主題名稱并將其傳遞給方法。如果在window.localStorage中找不到主題名稱，還可以指定要應用的主題。在下面的代碼中，它是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");

重要提示：如果注意到主題外觀有任何問題，請將初始化routine移到方法。

顏色調色板

調色板是與主題配色方案一起使用的次級配色方案，您可以使用它們以不同的方式對應用程序的部分進行樣式化，例如，當導航側邊欄應該是深色而內容區域應該是淺色時。

顏色調色板是由帶特定選擇器前綴的限定范圍的CSS規則定義的：dx-swatch-xxx（例如，dx-swatch-green），要將調色板應用到HTML文檔的某個部分，請按以下方式封裝該部分：

<div>
This content applies the primary color scheme

<div class="dx-swatch-dark">
This content applies the "dark" color scheme
</div>
</div>

重要提示：調色板應該屬于與主應用程序主題相同的主題（Generic, Generic Compact或Material），例如，如果主應用程序主題是Material，則只能使用基于Material主題的調色板。

您可以使用DevExtreme CLI或ThemeBuilder UI生成調色板：

下面的命令生成一個新的自定義調色板，它使用Generic Dark作為基礎主題：

> 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"

該命令的結果是一個dx.generic.dark.css文件，其中每個規則都以.dx-swatch-dark CSS selector為前綴。將文件移動到應用程序文件夾，注冊它，并將swatch類添加到頁面元素。

單擊工具欄上的Export來打開Theme Export pop-up對話框，輸入調色板的名稱，選中Save as a color swatch復選框，然后執行最后一步。

單擊Download CSS File，將CSS文件保存到本地。

將生成的CSS文件移動到應用程序文件夾，注冊它，并將swatch類添加到頁面元素。

注意：調色板不能用于定制的基于SVG的UI組件，因為UI組件的主題不是使用CSS的UI組件配置。通過預定義的CSS主題，基于SVG的UI組件可以檢測頁面上使用的是哪個主題，并應用相應的UI組件配置。當基于SVG組件位于調色板內時，檢測是不可能的，但是您可以創建和應用一個UI組件配置，使其在視覺上適配調色板。

DevExpress技術交流群6：600715373 歡迎一起進群討論