圖標(biāo)Button
Button提供了通過向其添加圖標(biāo)在視覺上增強(qiáng)其文本內(nèi)容的選項(xiàng)。你可以添加一個(gè)帶有img元素或背景圖像(通常是一個(gè)子圖形)的圖標(biāo),考慮到web標(biāo)準(zhǔn),使用背景圖像更好,因?yàn)閳D標(biāo)代表的是裝飾而不是結(jié)構(gòu)性內(nèi)容。
Button提供icon、spriteCssClass和imageUrl屬性,用于配置圖標(biāo)。對于特定的Button您只能使用其中一個(gè)屬性,如果您定義了多個(gè)屬性則Button將按照前面所述的順序只使用其中一個(gè)屬性。
有關(guān)呈現(xiàn)圖標(biāo)按鈕的完整示例,請參閱向按鈕添加圖像的文章。
增強(qiáng)按鈕的視覺效果:
- 使用背景圖標(biāo)
- 使用圖像圖標(biāo)
- 使用字體圖標(biāo)
背景圖標(biāo)
背景圖標(biāo)應(yīng)用于icon或spriteCssClass屬性并作為span元素的背景顯示。如果按鈕有一個(gè)k-sprite CSS類則可以自動(dòng)渲染span元素或者使用現(xiàn)有的span元素,如果使用了圖標(biāo)屬性則使用k-icon類。icon和spriteCssClass屬性的區(qū)別在于icon是用來作為主題子圖像一部分的內(nèi)置Kendo UI圖標(biāo)。有關(guān)可用圖標(biāo)名稱的列表,請參閱關(guān)于使用圖標(biāo)的文章。
下面的示例演示如何在Button組件中使用圖標(biāo)。
<button type="button" id="editButton">Edit</button> <button type="button" id="deleteButton"><span class="k-icon"></span>Delete</button> <script> $(function(){ $("#editButton").kendoButton({ icon: "pencil" }); $("#deleteButton").kendoButton({ icon: "trash" }); }); </script>
前面示例中的icon配置將生成以下HTML輸出。
<button type="button" id="editButton" class="k-button k-button-icontext"><span class="k-icon k-edit"></span>Edit</button> <button type="button" id="deleteButton" class="k-button k-button-icontext"><span class="k-icon k-delete"></span>Delete</button>
下面的例子演示了如何應(yīng)用spriteCssClass。
<button type="button" id="editButton">Edit</button> <button type="button" id="deleteButton"><span class="k-sprite"></span>Delete</button> <script> $(function(){ $("#editButton").kendoButton({ spriteCssClass: "myEditIcon" }); $("#deleteButton").kendoButton({ spriteCssClass: "myDeleteIcon" }); }); </script>
從技術(shù)上講spriteCssClass可以用來實(shí)現(xiàn)與icon相同的結(jié)果,但icon避免了同時(shí)設(shè)置兩個(gè)CSS類的需要并提供了一定程度的抽象展示。例如以下兩種配置實(shí)際上是相同的,#button2也應(yīng)用了一個(gè)k-sprite CSS類到span元素但它不改變按鈕的外觀。
$(function(){ $("#button1").kendoButton({ icon: "foo" }); $("#button2").kendoButton({ spriteCssClass: "k-icon k-foo" }); });
在某些情況下您可能希望使用只包含圖標(biāo)而沒有文本的Button,這種情況下為了增加組件的可訪問性,可以在sprite span中包含一個(gè)文本標(biāo)簽。
<button type="button" id="deleteButton"><span class="k-sprite">Delete</span></button> <script> $(function(){ $("#deleteButton").kendoButton({ spriteCssClass: "myDeleteIcon" }); }); </script>
圖像圖標(biāo)
圖像圖標(biāo)應(yīng)用于imageUrl屬性并作為img元素顯示,按鈕可以自動(dòng)呈現(xiàn)img元素或使用現(xiàn)有的img元素(如果它有k-image CSS類)。要在手動(dòng)添加img元素時(shí)增加組件的可訪問性請應(yīng)用alt屬性。
<button type="button" id="editButton">Edit</button> <button type="button" id="deleteButton"><img class="k-image" alt="Delete" />Delete</button> <script> $(function(){ $("#editButton").kendoButton({ imageUrl: "/images/myEditIcon.gif" }); $("#deleteButton").kendoButton({ imageUrl: "/images/myDeleteIcon.gif" }); }); </script>
字體圖標(biāo)
通過在spriteCssClass屬性上設(shè)置所需的第三方CSS類,你也可以在Kendo UI Button中使用FontAwesome或其他字體圖標(biāo)。但這種方法會(huì)呈現(xiàn)一個(gè)k-sprite CSS類,它應(yīng)用的字體和大小樣式可能會(huì)干擾字體圖標(biāo)樣式。
要處理這個(gè)問題,可以使用以下方法之一:
覆蓋破壞字體圖標(biāo)的Kendo UI樣式:
```dojo <link rel="stylesheet" /> <style> .k-button .fa { font-size: inherit; line-height: inherit; width: auto; height: auto; margin-left: 0; } </style> <button type="button" id="archiveButton">Archive</button> <script> $("#archiveButton").kendoButton({ spriteCssClass: "fa fa-archive" }); </script> ```
在Kendo UI Button中直接包含所需的HTML標(biāo)記和CSS類作為模板內(nèi)容,Button就不會(huì)呈現(xiàn)k-sprite類:
```dojo <link rel="stylesheet" /> <button type="button" id="archiveButton"><span class="fa fa-archive"></span> Archive</button> <script> $("#archiveButton").kendoButton({}); </script> ```