高清最全日剧手机观看,男女午夜爱爱福利专场,亚洲a∨

老司机夜插-理伦理片-理伦片免费-理伦片免费观看-理伦片免费看-理伦日韩-理论福利片-理论片第一页-理论片电影-理论片理论

DevExtreme初級(jí)入門(mén)教程（Angular篇）：應(yīng)用程序模板（Part 4）——配置主題

原創(chuàng)|使用教程|編輯：龔雪|2021-09-06 10:33:59.967|閱讀 216 次

概述：可直接利用DevExtreme Angular應(yīng)用程序模板快速創(chuàng)建一個(gè)簡(jiǎn)單的Angular應(yīng)用程序，本文主要介紹如何配置主題。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

相關(guān)鏈接：

DevExtreme v21.1.5最新版下載

配置主題

切換主題

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

metadata.base.json

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

運(yùn)行以下命令來(lái)重建主題：

npm run build-themes

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

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

1. 將 src\themes\metadata.base.json 或 src\themes\metadata.additional.json 導(dǎo)入到 ThemeBuilder。

2. 自定義主題。

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

運(yùn)行以下命令來(lái)重建主題：

npm run build-themes

應(yīng)用一個(gè)顏色色板

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

在 DevExtreme Angular 模板中，顏色樣本應(yīng)用于導(dǎo)航菜單并在 src\themes\metadata.additional.json 文件中配置。要將這個(gè)顏色樣本應(yīng)用到一個(gè)元素，添加 dx-swatch-additional 類(lèi)到這個(gè)元素：

HTML

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

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

以下代碼應(yī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開(kāi)發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動(dòng)應(yīng)用程序中使用。該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群4：715863792 歡迎一起進(jìn)群討論