Kendo UI致力于新的開發(fā)，來(lái)滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗(yàn)的Vue組件，幫助開發(fā)人員構(gòu)建下一代應(yīng)用程序。它是為Vue技術(shù)框架提供可用的Kendo UI組件，以便更快地構(gòu)建更好的Vue應(yīng)用程序。

每個(gè)Kendo UI for Vue使主題包都包含主題的源文件，作為構(gòu)建過(guò)程的一部分，您可以修改源文件并重新構(gòu)建主題。例如可以更改主題顏色、刪除未使用組件的 CSS 或使用特定主題顏色來(lái)設(shè)置應(yīng)用程序的樣式，主題源文件位于主題包的 scss 文件夾中。

Kendo UI最新正式版下載

要使用主題變量構(gòu)建自定義主題，請(qǐng)應(yīng)用以下任一方法：

• （推薦）使用應(yīng)用程序的構(gòu)建過(guò)程——這種方法簡(jiǎn)化了對(duì)新組件和主題包版本的升級(jí)。
• 使用主題的構(gòu)建過(guò)程——這種方法要求您在每次更新主題包時(shí)構(gòu)建主題。

要獲得主題的視覺預(yù)覽，請(qǐng)使用ThemeBuilder應(yīng)用程序，它有一個(gè)用戶友好的界面，您可以在其中預(yù)覽所有組件并嘗試多種顏色樣本。

使用應(yīng)用程序的構(gòu)建過(guò)程

• 要使用Node Sass（它使用 LibSass），請(qǐng)運(yùn)行npm install node-sass --save命令。
• 要使用Dart Sass，請(qǐng)運(yùn)行npm install sass --save命令。

// App.scss
@import "~@progress/kendo-theme-default/dist/all.scss";

通過(guò)此設(shè)置，您可以直接在應(yīng)用程序中自定義主題變量，例如您可以使用以下行將默認(rèn)原色從橙色更改為粉紅色：

$primary: #ff69b4;

@import "~@progress/kendo-theme-default/dist/all.scss";

dist/all文件為主題中可用的所有組件添加樣式，要縮小生成的CSS大小，請(qǐng)僅導(dǎo)入您在應(yīng)用程序中使用的組件源代碼，您可以在 scss/ 文件夾中找到它們。

// Import only the PanelBar and Grid styles using Node Sass
@import "~@progress/kendo-theme-default/scss/panelbar/_index.scss";
@import "~@progress/kendo-theme-default/scss/grid/_index.scss";

// or using Dart Sass
@import "~@progress/kendo-theme-default/scss/panelbar/";
@import "~@progress/kendo-theme-default/scss/grid/";

使用主題的構(gòu)建過(guò)程

雖然每個(gè)Kendo UI for Vue主題都有一個(gè)專用的NPM包（例如，@progress/kendo-theme-default），但所有主題的源代碼都位于 kendo-themes 存儲(chǔ)庫(kù)中，存儲(chǔ)庫(kù)包含將主題源編譯為 CSS 的構(gòu)建任務(wù)。要自定義主題，修改主題的源代碼，并使用構(gòu)建任務(wù)為您的應(yīng)用程序生成 CSS 文件。這種方法避免了在編譯 SCSS 時(shí)設(shè)置構(gòu)建配置的需要，但可能更難維護(hù)，因?yàn)槊看胃轮黝}時(shí)都必須重復(fù)該過(guò)程。

注意：為了改進(jìn)開發(fā)過(guò)程，每個(gè)主題的先前獨(dú)立 GitHub 存儲(chǔ)庫(kù)被合并到單個(gè) kendo-themes 存儲(chǔ)庫(kù)中，并且各個(gè)存儲(chǔ)庫(kù)被存檔。

使用顏色自定義主題

樣本是一組自定義主題外觀的變量。

• 每個(gè)樣本都放置在一個(gè)單獨(dú)的文件中，一個(gè)主題可能包含多個(gè)顏色板。
• 顏色板對(duì)于創(chuàng)建多個(gè)持久的主題變體很有用。
• .css 輸出文件可以跨項(xiàng)目共享，無(wú)需進(jìn)一步處理。

要?jiǎng)?chuàng)建樣本：

1. 復(fù)制 GitHub 存儲(chǔ)庫(kù)。
2. 安裝node-gyp。
3. 使用 npm install && npx lerna bootstrap 安裝所有主題的依賴項(xiàng)。
4. 將工作目錄切換到 packages/<THEME_NAME>。
5. 在 scss/swatches 文件夾中創(chuàng)建一個(gè) SWATCH_NAME.scss 樣本文件。
6. 要為主題構(gòu)建顏色板，請(qǐng)鍵入 npm run sass:swatches 或 npm run dart:swatches。
7. 在您的項(xiàng)目中包含已編譯的CSS樣本文件，還可以在 dist/SWATCH_NAME.css 下找到它。

例如，在 Material 主題中創(chuàng)建一個(gè)帶有以下行的藍(lán)色-粉色-深色顏色板：

// Variables.
$primary-palette-name: blue;
$secondary-palette-name: pink;
$theme-type: dark;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

對(duì)于 Default 和 Bootstrap 主題，樣本應(yīng)如下所示：

// Variables.
$primary: blue;
$secondary: pink;

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

// Alternatively, include all components.
@import "../all.scss";

自定義源代碼

通過(guò)修改主題源代碼創(chuàng)建自定義主題：

1. 復(fù)制 GitHub 存儲(chǔ)庫(kù)。
2. 使用 npm install && npx lerna bootstrap 安裝所有主題的依賴項(xiàng)。
3. 在 packages/THEME_NAME/scss/_variables.scss 文件中自定義主題變量。
4. 使用 npm run sass 或 npm run dart 命令構(gòu)建主題，以在 packages/THEME_NAME/dist/all.css 文件中創(chuàng)建主題的自定義版本。
5. 構(gòu)建完成后，使用編譯后的 CSS。

創(chuàng)建自定義組件包

您可能希望在 CSS 輸出中省略某些組件的樣式，要僅包含您需要的樣式：

1. 復(fù)制 GitHub存儲(chǔ)庫(kù)。
2. 使用 npm install && npx lerna bootstrap 安裝所有主題的依賴項(xiàng)。
3. 將工作目錄切換到 packages/<THEME_NAME>。
4. 在 scss 文件夾中創(chuàng)建 CUSTOM_THEME.scss 文件， 例如使用以下行創(chuàng)建 custom.scss 文件：

// Import the theme file for the components you use.
@import "../panelbar/_index.scss";
@import "../grid/_index.scss";

1. 要構(gòu)建文件，請(qǐng)導(dǎo)航到主題文件夾并運(yùn)行 gulp sass --file "scss/CUSTOM_THEME.scss"。
2. 在項(xiàng)目中包含編譯后的 CSS 文件，您可以在 dist/CUSTOM_THEME.css 下找到它。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論