Kendo UI for Vue Button提供了可點擊的UI功能，使您能夠僅顯示文本內(nèi)容，或顯示預定義的圖標、圖像和自定義圖標，并呈現(xiàn)文本和圖像內(nèi)容的組合。

Kendo UI for Vue Button組件是Kendo UI for Vue庫中的Vue UI組件部分，它通過kendo-vue-buttons包下的NPM分發(fā)。

Kendo UI最新官方正式版下載

基本用法

下面的示例演示了 Button 的作用。

main.vue

<template>
<div class="row example-wrapper">
<div class="col-xs-12 col-sm-6 example-col">
<p>Default k-buttons</p>
<p>
<kbutton>Browse</kbutton>
<kbutton :icon="'folder'">Browse</kbutton>
<kbutton :icon="'folder'"></kbutton>
</p>
<p>
<kbutton :disabled="true">Browse</kbutton>
<kbutton :icon="'folder'" :disabled="true">Browse</kbutton>
<kbutton :icon="'folder'" :disabled="true"></kbutton>
</p>
</div>

<div class="col-xs-12 col-sm-6 example-col">
<p>Default k-buttons (Primary)</p>
<p>
<kbutton :theme-color="'primary'">Browse</kbutton>
<kbutton :icon="'folder'" :theme-color="'primary'">Browse</kbutton>
<kbutton :icon="'folder'" :theme-color="'primary'"></kbutton>
</p>
<p>
<kbutton :theme-color="'primary'" :disabled="true">Browse</kbutton>
<kbutton :icon="'folder'" :theme-color="'primary'" :disabled="true"
>Browse</kbutton
>
<kbutton
:icon="'folder'"
:theme-color="'primary'"
:disabled="true"
></kbutton>
</p>
</div>

<div class="col-xs-12 col-sm-6 example-col">
<p>Flat k-buttons</p>
<p>
<kbutton :fill-mode="'flat'">Browse</kbutton>
<kbutton :icon="'folder'" :fill-mode="'flat'">Browse</kbutton>
<kbutton :icon="'folder'" :fill-mode="'flat'"></kbutton>
</p>
<p>
<kbutton :fill-mode="'flat'" :disabled="true">Browse</kbutton>
<kbutton :icon="'folder'" :fill-mode="'flat'" :disabled="true"
>Browse</kbutton
>
<kbutton
:icon="'folder'"
:fill-mode="'flat'"
:disabled="true"
></kbutton>
</p>
</div>

<div class="col-xs-12 col-sm-6 example-col">
<p>Flat k-buttons (Primary)</p>
<p>
<kbutton :theme-color="'primary'" :fill-mode="'flat'">Browse</kbutton>
<kbutton :icon="'folder'" :theme-color="'primary'" :fill-mode="'flat'"
>Browse</kbutton
>
<kbutton
:icon="'folder'"
:theme-color="'primary'"
:fill-mode="'flat'"
></kbutton>
</p>
<p>
<kbutton :theme-color="'primary'" :fill-mode="'flat'" :disabled="true"
>Browse</kbutton
>
<kbutton
:icon="'folder'"
:theme-color="'primary'"
:fill-mode="'flat'"
:disabled="true"
>Browse</kbutton
>
<kbutton
:icon="'folder'"
:theme-color="'primary'"
:fill-mode="'flat'"
:disabled="true"
></kbutton>
</p>
</div>

<div class="col-xs-12 col-sm-6 example-col">
<p>Outline k-buttons</p>
<p>
<kbutton :fill-mode="'outline'">Browse</kbutton>
<kbutton :icon="'folder'" :fill-mode="'outline'">Browse</kbutton>
<kbutton :icon="'folder'" :fill-mode="'outline'"></kbutton>
</p>
<p>
<kbutton :fill-mode="'outline'" :disabled="true">Browse</kbutton>
<kbutton :icon="'folder'" :fill-mode="'outline'" :disabled="true"
>Browse</kbutton
>
<kbutton
:icon="'folder'"
:fill-mode="'outline'"
:disabled="true"
></kbutton>
</p>
</div>

<div class="col-xs-12 col-sm-6 example-col">
<p>Outline k-buttons (Primary)</p>
<p>
<kbutton :theme-color="'primary'" :fill-mode="'outline'"
>Browse</kbutton
>
<kbutton
:icon="'folder'"
:theme-color="'primary'"
:fill-mode="'outline'"
>Browse</kbutton
>
<kbutton
:icon="'folder'"
:theme-color="'primary'"
:fill-mode="'outline'"
></kbutton>
</p>
<p>
<kbutton
:theme-color="'primary'"
:fill-mode="'outline'"
:disabled="true"
>Browse</kbutton
>
<kbutton
:icon="'folder'"
:theme-color="'primary'"
:fill-mode="'outline'"
:disabled="true"
>Browse</kbutton
>
<kbutton
:icon="'folder'"
:theme-color="'primary'"
:fill-mode="'outline'"
:disabled="true"
></kbutton>
</p>
</div>

<div class="col-xs-12 example-col">
<p>Icon Types</p>
<kbutton :icon="'calendar'">Kendo UI for Vue Font Icon</kbutton>
<kbutton :icon-class="'fa fa-calendar fa-fw'">Font Awesome Icon</kbutton>
<kbutton
:image-url="'//demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png'"
>Image Icon</kbutton
>
</div>
</div>
</template>
<script>
import { Button, ButtonGroup } from '@progress/kendo-vue-buttons';

export default {
components: {
kbutton: Button,
buttongroup: ButtonGroup,
},
};
</script>
<style scoped>
.k-button {
margin-right: 3px;
}

.k-button > .k-image {
width: 20px;
height: 20px;
}
</style>

main.js

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

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

功能和特點

• 禁用按鈕
• 圖標按鈕
• 主按鈕
• 可切換按鈕
• 外觀
• 全球化

事件

下面的示例演示了基本的 Button 事件。

main.vue

<template>
<div class="example-config">
<kbutton
@click="handleDomEvent"
@mousedown="handleDomEvent"
@mouseup="handleDomEvent"
@focus="handleDomEvent"
@blur="handleDomEvent"
@keypress="handleDomEvent"
>
My Button
</kbutton>
<h5>{{title}}</h5>
<ul class="event-log">
<li v-for="log in logs" :key="log">{{log}}</li>
</ul>
</div>
</template>
<script>
import { Button } from '@progress/kendo-vue-buttons';

export default {
components: {
'kbutton': Button
},
data () {
return {
logs: []
};
},
methods: {
handleDomEvent (event) {
this.logs.unshift(event.type);
}
}
}
</script>

main.js

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

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

Kendo UI for Vue | 下載試用

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

Telerik_KendoUI產(chǎn)品技術交流群：726377843    歡迎一起進群討論