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

翻译|使用教程|编辑:龚雪|2022-09-29 10:55:45.430|阅读 38 次

概述:本文主要为大家介绍Kendo UI for Vue控件的常见的主题和样式,欢迎下载最新版控件体验!

# 31款JAVA开发必备控件和工具 # 年末狂欢季,DevExpress、Aspose等5000款正版软/控件抄底价来袭 >>

相关链接:

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界面开发定制-慧都

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
在线咨询
联系我们

客服热线
023-68661681

QQ客服

意见反馈


添加微信获专业服务

TOP
在线客服系统
live chat