Kendo UI致力于新的開發，來滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗的Vue組件，幫助開發人員構建下一代應用程序。它是為Vue技術框架提供可用的Kendo UI組件，以便更快地構建更好的Vue應用程序。

您可以通過向其添加圖像、預定義或自定義圖標來增強 Button 的文本內容。

從 Web 標準的角度來看，最好使用背景圖像，因為圖標用于裝飾而不是表示結構內容。

Kendo UI最新官方正式版下載

Button提供以下選項：

• 使用內置的Kendo UI for Vue圖標，內置圖標通過icon 屬性應用并顯示為 Button 的背景。
• 添加image圖標，它們通過組件的屬性應用。
• 添加 FontAwesome 和其他字體圖標，它們是通過屬性設置所需的第三方 CSS 類來實現的。

下面的示例演示如何在 Button 中使用不同類型的圖標。

main.vue

<template>
<div>
<kbutton :icon="'refresh'">Kendo UI for Vue font icon</kbutton>
<kbutton :image-url="'//demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'">Image icon</kbutton>
<kbutton :icon-class="'fa fa-key fa-fw'">FontAwsome icon</kbutton>
</div>
</template>
<script>
import { Button } from '@progress/kendo-vue-buttons';

export default {
components: {
'kbutton': Button
}
}
</script>
<style>
.k-button + .k-button {
margin-left: 5px
}
</style>

main.js

import { createApp } from 'vue'
import App from './main.vue'

createApp(App).mount('#app')

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論