UI组件库Kendo UI for Vue原生组件中文教程：Button入门指南

本文主要为大家介绍如何开始使用Kendo UI for Vue的按钮组件，欢迎下载最新版控件体验！

基本用法

下面的示例演示了 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="'https://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致力于新的开发，来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件，帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件，以便更快地构建更好的Vue应用程序。

Telerik_KendoUI产品技术交流群：726377843    欢迎一起进群讨论

了解最新Kendo UI最新资讯，请关注Telerik中文网！

来源：慧都