B/S端開發工具DevExtreme應用程序模板（四） - 配置主題

DevExtreme v21.1.5最新版下載

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

配置主題

切換主題

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

metadata.base.json

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

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

npm run build-themes

創建自定義主題

您可以使用DevExtreme ThemeBuilder 基於預定義的主題創建自定義主題，請按照以下步驟操作：

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

2. 自定義主題。

3. 將主題元數據導出到初始文件。

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

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 文件中定義，將它們應用於自定義元素，以便元素與應用程序的其餘部分具有統一的外觀。

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

SCSS

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

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

DevExtreme | 下載試用

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

---

更多DevExpress線上公開課、中文教程資訊請上中文網獲取