外觀

---

立即下載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 
}