外觀

---

立即下載Kendo UI for jQuery

注意：從Kendo UI R1 2022開始，Button小部件使用全新的樣式。

本文將講述 Kendo UI Button的新樣式。

有關(guān)這些更改背后的決策的更多信息，請?jiān)L問風(fēng)格與外觀中“概述”一文。

選項(xiàng)

Kendo UI Button支持以下樣式選項(xiàng):

• size—配置組件的總體大小。
• themeColor—配置組件的顏色
• fillMode—配置如何將顏色應(yīng)用于組件。
• rounded—配置組件的邊界半徑。

尺寸

size選項(xiàng)控制按鈕的大小。類的結(jié)構(gòu)是k-button-{size}。

size選項(xiàng)有以下值:

• sm—小號(hào)
• md—中號(hào)
• lg—大號(hào)
• none—未設(shè)置

默認(rèn)大小值為medium，它通過k-button-md類應(yīng)用于button元素。

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

填充方式

fillMode選項(xiàng)控制顏色應(yīng)用于按鈕的方式，類的結(jié)構(gòu)是k-button-{fillMode}。

fillMode選項(xiàng)有以下取值:

• solid
• outline
• flat
• link
• none

fillMode的默認(rèn)值是solid，它通過k-button-solid類應(yīng)用于button元素。

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

主題顏色
themeColor選項(xiàng)控制按鈕的顏色。由于應(yīng)用themeColor與fillMode密切相關(guān)，所以themeColor類名的結(jié)構(gòu)是composite - k-button-{fillMode}-{themeColor}。

themeColor選項(xiàng)可用的值如下:

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

默認(rèn)的themeColor值是base，具有默認(rèn)填充模式和themeColor的按鈕將應(yīng)用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>

圓角

圓角選項(xiàng)控制應(yīng)用于渲染按鈕的邊框半徑的大小，類的結(jié)構(gòu)是k-round -{size}。

以下值可用于圓角選項(xiàng):

• sm—小號(hào)
• md—中號(hào)
• lg—大號(hào)
• circle
• pill
• none—未設(shè)置

默認(rèn)的圓角值是medium，它通過k-round -md類應(yīng)用于button元素。

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

新舊渲染比較

 該組件的舊渲染由一個(gè)button元素和一個(gè)名為k-button的類組成，k-button保存了與Button組件相關(guān)的所有樣式信息。

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

新渲染中樣式被拆分為多個(gè)類名。每個(gè)類的作用域?yàn)閱蝹€(gè)按鈕外觀屬性:

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

主要按鈕

k-primary類被替換為適當(dāng)?shù)膖hemeColor類，例如當(dāng)fillMode為solid時(shí)，該類是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類被替換為適當(dāng)?shù)膄illMode和themeColor類，例如當(dāng)themeColor是base時(shí)它們是：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>

帶圖標(biāo)的按鈕
在舊的呈現(xiàn)中k-button-icon類用于帶有圖標(biāo)的按鈕，k-button-icon類現(xiàn)在用于icon元素本身。如果按鈕只包含一個(gè)圖標(biāo)而不包含文本則將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>

下面的例子展示了如何在新的和舊的渲染中自定義帶有配置圖標(biāo)的按鈕的樣式:

視覺向后兼容性

要獲得與舊渲染相同的外觀，必須更新元素引用。

注意：當(dāng)您使用LESS主題時(shí)，新的樣式和渲染只支持默認(rèn)選項(xiàng)。

對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 
}