当前位置: 首页 > 使用教程

UI组件库Kendo UI for Vue原生组件中文教程:主题 & 样式概述

发布时间:2022-09-29

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 文件夹中。

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

Kendo UI相关组件推荐:
  • Kendo UI for jQuery :完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。
  • Kendo UI for Angular:专业级的Angular UI组件库,不仅是将其他供应商提供的现有组件封装起来,telerik致力于提供纯粹高性能的Angular UI组件,而无需任何jQuery依赖关系。
  • Kendo UI for React:通过React框架的Kendo UI JavaScript封装来支持React Javascript框架,能够为客户提供更好的用户体验,并且能够更快地构建更好的应用程序。

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

了解最新Kendo UI最新资讯,请关注Telerik中文网!

高端UI界面开发定制-慧都
在线
客服
微信
QQ 电话
400-700-1020
返回
顶部