Vue框架的原生UI组件Kendo UI for Vue——主题 & 样式概述

Kendo UI致力于新的开发，来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件，帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件，以便更快地构建更好的Vue应用程序。

Kendo UI for Vue控件提供了可用于设置应用程序样式的主题，目前提供以下主题：

• 默认主题 — 可通过 @progress/kendo-theme-default NPM 模块获得。
• Bootstrap 主题 —— 可通过 @progress/kendo-theme-bootstrap NPM 模块获得。
• Material主题 — 可通过 @progress/kendo-theme-material NPM 模块获得。

Kendo UI最新正式版下载

安装

1. 要开始使用主题，请通过 NPM 安装其包。 例如，要安装默认主题，请运行以下命令：

npm install --save @progress/kendo-theme-default

2. 安装完主题包后，在您的项目中引用它。

在项目中包含主题

每个主题包都提供了两种将主题包含在项目中的方法：

• 通过使用预编译的 CSS 文件——这种方法不需要构建步骤，因此是两者中速度更快的方法。
• 通过从 SCSS 源文件编译主题——这种方法减少了 CSS 输出并允许您自定义主题。

使用预编译的 CSS

每个主题都包含一个预编译的 dist/all.css CSS 文件，其中包含适用所有Kendo UI for Vue组件的样式。要使用 dist/all.css，请在应用程序的 App.vue 文件中引用它。

import '@progress/kendo-theme-default/dist/all.css';

虽然使用预编译的 CSS 文件比从源代码编译主题更快，但该方法具有以下缺点：

• 它包括应用程序中未使用组件的CSS。
• 它不提供通过 SCSS 变量自定义主题的选项（当您从源代码构建主题时可以），因为主题已经编译。

自定义主题

每个Kendo UI for Vue主题包都包含主题的源文件，这些源文件为您提供了在构建过程中修改和重建主题的选项。 例如，您可以更改主题颜色、删除未使用组件的 CSS 或使用特定主题颜色来设置应用程序的样式，主题源文件位于主题包的 scss 文件夹中。

更多自定义主题详情，请参见这篇文章>>

---

Telerik_KendoUI产品技术交流群：726377843    欢迎一起进群讨论

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