外观

---

立即下载Kendo UI for jQuery

注意：从Kendo UI R1 2022开始，Button小部件使用全新的样式。

本文将讲述 Kendo UI Button的新样式。

有关这些更改背后的决策的更多信息，请访问风格与外观中“概述”一文。

选项

Kendo UI Button支持以下样式选项:

• size—配置组件的总体大小。
• themeColor—配置组件的颜色
• fillMode—配置如何将颜色应用于组件。
• rounded—配置组件的边界半径。

尺寸

size选项控制按钮的大小。类的结构是k-button-{size}。

size选项有以下值:

• sm—小号
• md—中号
• lg—大号
• none—未设置

默认大小值为medium，它通过k-button-md类应用于button元素。

<button class="k-button k-button-md" >
</button>

填充方式

fillMode选项控制颜色应用于按钮的方式，类的结构是k-button-{fillMode}。

fillMode选项有以下取值:

• solid
• outline
• flat
• link
• none

fillMode的默认值是solid，它通过k-button-solid类应用于button元素。

<button class="k-button k-button-solid" > 
</button>

主题颜色
themeColor选项控制按钮的颜色。由于应用themeColor与fillMode密切相关，所以themeColor类名的结构是composite - k-button-{fillMode}-{themeColor}。

themeColor选项可用的值如下:

• base
• primary
• secondary
• tertiary
• info
• success
• warning
• error
• dark
• light
• inverse
• none

默认的themeColor值是base，具有默认填充模式和themeColor的按钮将应用k-button-solid-base类。

<!-- Button with default fillMode and themeColor -->
<button class="k-button k-button-solid k-button-solid-base" >
</button>

<!-- Button with default fillMode and 'primary' themeColor -->
<button class="k-button k-button-solid k-button-solid-primary" >
</button>

<!-- Button with `flat` fillMode and `primary` themeColor -->
<button class="k-button k-button-flat k-button-flat-primary" >
</button>

圆角

圆角选项控制应用于渲染按钮的边框半径的大小，类的结构是k-round -{size}。

以下值可用于圆角选项:

• sm—小号
• md—中号
• lg—大号
• circle
• pill
• none—未设置

默认的圆角值是medium，它通过k-round -md类应用于button元素。

<button class="k-button k-rounded-md" > 
</button>

新旧渲染比较

该组件的旧渲染由一个button元素和一个名为k-button的类组成，k-button保存了与Button组件相关的所有样式信息。

<!-- OLD --> 
<button class='k-button'></button>

新渲染中样式被拆分为多个类名。每个类的作用域为单个按钮外观属性:

<!-- NEW --> 
<button class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md" > 
</button>

主要按钮

k-primary类被替换为适当的themeColor类，例如当fillMode为solid时，该类是k-button-solid-primary。

<!-- OLD --> 
<button class="k-button k-primary"> 
Primary Button 
</button>

<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary"> 
Primary Button 
</button>

扁平按钮
k-flat类被替换为适当的fillMode和themeColor类，例如当themeColor是base时它们是：k-button-flat和k-button-flat-base。

<!-- OLD --> 
<button class="k-button k-primary"> 
Flat Button </button> 
<button class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"> 
Flat Button 
</button>

带图标的按钮
在旧的呈现中k-button-icon类用于带有图标的按钮，k-button-icon类现在用于icon元素本身。如果按钮只包含一个图标而不包含文本则将k-icon-button用于button元素，移除k-button-icontext类。

<!-- OLD --> 
<button class="k-button k-button-icontext"> 
<span class=" k-icon k-i-folder"></span> 
Button 
</button> 
<button class="k-button k-button-icon"> 
<span class="k-icon k-i-folder"></span> 
</button>

<!-- NEW --> 
<button class="k-button k-button-solid k-button-md k-rounded-md k-button-solid-base"> 
<span class="k-button-icon k-icon k-i-folder"></span> 
<span class="k-button-text">Button</span> 
</button>

<button class="k-button k-button-solid k-button-md k-rounded-md k-button-solid-base k-icon-button"> 
<span class="k-button-icon k-icon k-i-folder"></span> 
</button>

下面的例子展示了如何在新的和旧的渲染中自定义带有配置图标的按钮的样式:

视觉向后兼容性

要获得与旧渲染相同的外观，必须更新元素引用。

注意：当您使用LESS主题时，新的样式和渲染只支持默认选项。

对button元素的引用仍然可以通过k-button类获得。

$(".k-button") // Returns a reference to the button element in the old and the new rendering.

在R1 2022之前的版本中，可以使用'k-button'类更改按钮中文本的颜色，渲染更改之后的版本也是一样。

.k-button{ 
color: green 
}