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 模块获得。
安装
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中文网!