UI组件库Kendo UI for Vue原生组件中文教程：如何自定义主题

要使用主题变量构建自定义主题，请应用以下任一方法：

• （推荐）使用应用程序的构建过程——这种方法简化了对新组件和主题包版本的升级。
• 使用主题的构建过程——这种方法要求您在每次更新主题包时构建主题。

要获得主题的视觉预览，请使用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. 复制kendo-themes GitHub 存储库。
2. 安装node-gyp。
3. 使用 npm install && npx lerna bootstrap 安装所有主题的依赖项。
4. 将工作目录切换到 packages/<THEME_NAME>。
5. 要为主题构建颜色板，请键入 npm run sass:swatches 或 npm run dart:swatches。

例如，在 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. 复制kendo-themes 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. 复制 kendo-themes 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    欢迎一起进群讨论