DevExtreme v21.1.5最新版下載

配置主題

切換主題

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

metadata.base.json

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

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

npm run build-themes

創建自定義主題

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

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技術交流群4：715863792      歡迎一起進群討論