Kendo UI致力于新的開發，來滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗的Vue組件，幫助開發人員構建下一代應用程序。它是為Vue技術框架提供可用的Kendo UI組件，以便更快地構建更好的Vue應用程序。

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

Kendo UI最新正式版下載

要使用主題變量構建自定義主題，請應用以下任一方法：

• （推薦）使用應用程序的構建過程——這種方法簡化了對新組件和主題包版本的升級。
• 使用主題的構建過程——這種方法要求您在每次更新主題包時構建主題。

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

使用應用程序的構建過程

• 要使用Node Sass（它使用 LibSass），請運行npm install node-sass --save命令。
• 要使用Dart Sass，請運行npm install sass --save命令。

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

通過此設置，您可以直接在應用程序中自定義主題變量，例如您可以使用以下行將默認原色從橙色更改為粉紅色：

$primary: #ff69b4;

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

dist/all文件為主題中可用的所有組件添加樣式，要縮小生成的CSS大小，請僅導入您在應用程序中使用的組件源代碼，您可以在 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/";

使用主題的構建過程

雖然每個Kendo UI for Vue主題都有一個專用的NPM包（例如，@progress/kendo-theme-default），但所有主題的源代碼都位于 kendo-themes 存儲庫中，存儲庫包含將主題源編譯為 CSS 的構建任務。要自定義主題，修改主題的源代碼，并使用構建任務為您的應用程序生成 CSS 文件。這種方法避免了在編譯 SCSS 時設置構建配置的需要，但可能更難維護，因為每次更新主題時都必須重復該過程。

注意：為了改進開發過程，每個主題的先前獨立 GitHub 存儲庫被合并到單個 kendo-themes 存儲庫中，并且各個存儲庫被存檔。

使用顏色自定義主題

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

• 每個樣本都放置在一個單獨的文件中，一個主題可能包含多個顏色板。
• 顏色板對于創建多個持久的主題變體很有用。
• .css 輸出文件可以跨項目共享，無需進一步處理。

要創建樣本：

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

例如，在 Material 主題中創建一個帶有以下行的藍色-粉色-深色顏色板：

// 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";

對于 Default 和 Bootstrap 主題，樣本應如下所示：

// 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";

自定義源代碼

通過修改主題源代碼創建自定義主題：

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

創建自定義組件包

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

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

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

1. 要構建文件，請導航到主題文件夾并運行 gulp sass --file "scss/CUSTOM_THEME.scss"。
2. 在項目中包含編譯后的 CSS 文件，您可以在 dist/CUSTOM_THEME.css 下找到它。

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論