DevExtreme v21.1.5最新版下載

配置主題

切換主題

DevExtreme Angular模板為視圖內(nèi)容使用一個主主題，為導航菜單使用一個附加主題（色板）。 要切換到另一個主題，請打開 src\themes\metadata.base.json 或 src\themes\metadata.additional.json 文件并為 baseTheme 字段指定一個主題名稱：

metadata.base.json

{
// ...
"baseTheme": "material.blue.light",
// ...
}

運行以下命令來重建主題：

npm run build-themes

創(chuàng)建自定義主題

您可以使用 基于預定義的主題創(chuàng)建自定義主題，請按照以下步驟操作：

1. 將 src\themes\metadata.base.json 或 src\themes\metadata.additional.json 導入到 ThemeBuilder。

2. 自定義主題。

3. 將主題元數(shù)據(jù)導出到初始文件。

運行以下命令來重建主題：

npm run build-themes

應用一個顏色色板

顏色色板是與主要配色方案一起使用的輔助配色方案。

在 DevExtreme Angular 模板中，顏色樣本應用于導航菜單并在 src\themes\metadata.additional.json 文件中配置。 要將這個顏色樣本應用到一個元素，添加 dx-swatch-additional 類到這個元素：

HTML

<div class="dx-swatch-additional">
<!-- Your content here -->
</div>

主題變量在 src\themes\generated\variables.base.scss 和 src\themes\generated\variables.additional.scss 文件中定義，將它們應用于自定義元素，以便元素與應用程序的其余部分具有統(tǒng)一的外觀。

以下代碼應用$base-accent變量作為my-element的背景顏色：

SCSS

// Your SCSS file
@import "../../../themes/generated/variables.base.scss";

#my-element {
background-color: $base-accent;
}

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應式UI小部件集合，可在傳統(tǒng)Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術交流群4：715863792      歡迎一起進群討論