ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

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

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 模块获得。安装1. 要开始使用主题请通过 NPM 安装其包。 例如要安装默认主题请运行以下命令npm install --save progress/kendo-theme-default2. 安装完主题包后在您的项目中引用它。在项目中包含主题每个主题包都提供了两种将主题包含在项目中的方法通过使用预编译的 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 文件夹中。
返回列表