款式外观/更少的主题

新jQuery的剑道UI?下载30天免费试用

概述

Kendo UI小部件的外观完全取决于应用的CSS类定义的样式。这些控件不使用内联样式，除非在某些非常特殊的情况下，您必须使用JavaScript设置这些样式，这取决于浏览器或配置。

jQuery Web主题的剑道UI

向项目添加主题

为任何剑道UI小部件设置剑道UI主题，例如剑道UI网格或剑道用户界面条形图，要求你在你的项目中包含以下两个样式表:

  • kendo.common.css-这是一个通用(基本)样式表。它应用与元素定位和小部件尺寸相关的样式。小部件必须以正确的方式显示和运行。
  • 剑道。(主题). css-此样式表应用主题特定的样式，如调色板，背景渐变和图案等。

下面的例子演示了如何将样式表包含到项目中:

     .css
  • 您必须在主题CSS文件之前注册公共CSS文件，因为主题CSS文件可能需要通过具有相同CSS细节的选择器覆盖公共样式。
  • 在页面上和任何给定的时间，您只需要注册一对公共和主题CSS文件。

下面的例子演示了如何使用Kendo CDN包含默认的Less主题:

<链接rel="样式表" href="//www.aliitrade.com/kendo.cdn/2022.2.510/styles/kendo.common.min.css"> <链接rel="样式表" href="//www.aliitrade.com/kendo.cdn/2022.2.510/styles/kendo.rtl.min.css"> <链接rel="样式表" href="//www.aliitrade.com/kendo.cdn/2022.2.510/styles/kendo.default.min.css"> <链接rel="样式表" href="//www.aliitrade.com/kendo.cdn/2022.2.510/styles/kendo.mobile.all.min.css">

数据可视化小部件

Kendo UI仪表，图表，条形码，图表和地图使用浏览器技术的组合，以达到所需的精度和响应能力。可视化呈现为计算布局的矢量图形。相反，交互功能是通过使用传统的HTML元素构建的。因此，这些小部件的外观设置分为声明性选项和传统CSS。

下面的示例演示如何为剑道UI图定义主题。

$(" #表”)。kendoChart({theme: "material"…})；

jQuery DataViz主题的剑道UI

常用CSS文件

有些主题需要应用不同维度的不同通用(基本)样式表。Kendo UI发布如下常见的样式表:

CSS文件 内容及应用
kendo.common.css 默认的基本样式表。大多数剑道UI主题都需要。
kendo.common-bootstrap.css Bootstrap (v3)主题的基本样式表。使用这个文件而不是kendo.common.css只有在kendo.bootstrap.css主题文件来实现类似bootstrap的小部件尺寸。
kendo.common-material.css Material和MaterialBlack主题的基本样式表。使用这个文件而不是kendo.common.css只有在kendo.material.css或kendo.materialblack.css主题文件。
kendo.common-nova.css Nova主题的基本样式表。使用这个文件而不是kendo.common.css只有在kendo.nova.css．
kendo.common-fiori.css Fiori主题的基本样式表在Kendo UI的企业包中可用。使用这个文件而不是kendo.common.css只有在kendo.fiori.css．
kendo.common-office365.css Office365主题的基本样式表可在Kendo UI的企业包中使用。使用这个文件而不是kendo.common.css只有在kendo.office365.css．

除了公共样式表和主题样式表之外，还必须在应用程序中提供以下文件夹。

  • / ThemeName /-这是一个文件夹，其中包含了使用的Kendo UI主题所需的所有图像。文件夹名称与主题名称匹配，例如:默认的，引导，银等。可以删除未使用主题的主题图像文件夹。
  • / /字体-这就是KendoUIGlyphs而且DejaVu字体文件驻留。的KendoUIGlyphsfont描述了web小部件使用的Kendo UI字体图标。的DejaVu期间默认使用字体PDF导出．
  • / /图片-这是移动小部件的Kendo UI字体图标所在的地方。
  • /材质/这是为不支持CSS3线性渐变的浏览器存储一些备用主题图像的地方。

特定CSS

虽然大多数CSS代码是跨浏览器兼容的，但有些布局需要针对不同的浏览器使用不同的样式。Kendo UI通过向文档根元素添加特定于浏览器的类来针对特定的浏览器，而不是依赖于CSS解析hacks。

下面的示例演示了如何利用这些类。

.k-ie{/*样式适用于所有版本的ie */} .k-ie9{/*样式只适用于IE9 */} .k-ff{/*样式适用于所有版本的Firefox */}

生成的类的语法是k - k(浏览器)(浏览器)[majorVersion]．

原语

Kendo UI小部件使用原语，这意味着不同小部件中的不同HTML元素使用相同的CSS类来提供抽象级别并允许通用样式。要了解如何修改原语，请检查压倒一切的原语小节中的内容。

您可以使用一些CSS类为容器应用边框和背景色—例如，k-info-colored，k-success-colored,k-error-colored．有关更多示例，请参阅StylingPanels演示．

常用CSS类

CSS类 行为
k-widget 该类应用于小部件包装器以设置边框、文本和背景色。除了k-widget，每个小部件都有自己特定的CSS类，例如菜单，k-panelbar，k-tabstrip等。
k-header 适用于网格标题，菜单顶级项目，面板栏顶级项目，TabStrip项目和下拉列表设置背景图像和背景颜色。
k-link 应用于超链接和可点击的文本项，以设置文本颜色。
k-button 应用于看起来像按钮的元素。该类设置文本颜色、背景颜色、背景图像和悬停样式。这是样式化表单按钮的推荐类。
k-input 应用于文本框内的输入部件，如组合框和自动完成设置边框，文本和背景颜色。
k-textbox 一样k-input，但用于独立(通用)输入不属于小部件的元素。这是样式化表单的推荐类输入元素，因为它提供了与Kendo UI输入小部件相同的外观、高度和垂直对齐。
k-checkbox 当为TreeView小部件启用复选框时，应用于它内部的复选框。
k-group而且含钾量 应用于各种容器设置背景和边框颜色。
k-popup 应用于从其打开器组件分离并置于身体元素。
k-icon而且k-sprite 应用于将精灵图像的一部分显示为背景的元素，以初始化它们的尺寸。
k-image 应用于内联图像以设置其尺寸。
k-item 适用于各种重复的小部件项目，例如，菜单，标签带，树视图，面板栏，组合框，下拉列表等。这个CSS类不应用任何特定的全局样式和运动显示:块．
k-first而且k-last 设置在第一个和最后一个k-item分别在需要特殊样式的地方，例如圆角和删除边框。

k态类

组件的外观很可能取决于它的状态，状态也与CSS类相关。

k-state类 行为
k-state-default 这个类应用于项目以设置它们的默认外观背景和颜色。
k-state-hover 设置为悬停时应用悬停外观的项目。
k-state-focused 主要应用于专注输入元素和下拉列表。
k-state-active 设置为激活k-link元素。
k-state-selected 设置为所选项目，以应用其在面板栏和标签条中所选的外观。
k-state-disabled 应用于禁用项。
k-state-error 可用于具有无效值的表单字段。

向后兼容性

本节包括与Kendo UI向后兼容性相关的问题。

带有高对比度主题的圆形组件

截至2022年R1，默认四舍五入值的值设置为媒介．

要恢复到之前的border-radius (9999px)值，可以使用以下任何一种方法:

  • 设置圆形的组件的选项完整的：
 .
  • 如果你正在使用小部件初始化: