UI组件库Kendo UI for Vue入门指南 - 如何自定义主题

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. 复制kendo-themes GitHub 存储库。
2. 安装node-gyp。
3. 使用 npm install && npx lerna bootstrap 安装所有主题的依赖项。
4. 将工作目录切换到 packages/。
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. 复制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/。
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 下找到它。

了解最新Kendo UI最新资讯，请关注Telerik中文网！