UI组件库Kendo UI for Vue原生组件中文教程：如何设置按钮外观？（一）

Kendo UI for Vue原生组件——Button 提供了一组预定义的外观选项。除了 Button 的默认外观之外，这些替代样式选项使您能够配置组件外观的每个单独方面。

配置器演示

以下示例演示如何通过配置器配置 Button 外观的不同方面。

main.vue

<template><div><ButtonsStyleConfigurator:shape="shape"@shapechange="setShape":size="size"@sizechange="setSize":theme-color="themeColor"@themecolorchange="setThemeColor":fill-mode="fillMode"@fillmodechange="setFillMode":rounded="rounded"@roundedchange="setRounded"/><kbutton:shape="shape":size="size":theme-color="themeColor":fill-mode="fillMode":rounded="rounded">Button</kbutton></div></template><script>import { Button } from "@progress/kendo-vue-buttons";import ButtonStyleConfigurator from "./ButtonStyleConfigurator";export default {components: {ButtonStyleConfigurator,"kbutton": Button,},data() {return {shape: "rectangle",size: "medium",themeColor: "base",fillMode: "solid",rounded: "medium",};},methods: {setShape(shape) {this.shape = shape;},setSize(event) {this.size = event.value;},setThemeColor(event) {this.themeColor = event.value},setFillMode(event) {this.fillMode = event.value},setRounded(event) {this.rounded = event.value},},};</script>

main.js

import { createApp } from 'vue'import App from './main.vue'createApp(App).mount('#app')

ButtonStyleConfigurator.vue

<template><div :style="{ margin: '-30px -30px 30px -30px' }"><div :style="{ display: 'flex', justifyContent: 'center' }"><spanclass="k-color-primary":style="{ textTransform: 'uppercase', padding: '4px 0' }">Configurator</span></div><divclass="example-config":style="{display: 'flex',justifyContent: 'space-between',flexWrap: 'wrap',}"><span v-if="shape !== undefined" class="k-form-field"><k-label>Shape<div class="k-form-field-wrap"><kbuttongroup><kbuttonv-for="(shapeElelement, index) in shapes":key="index":togglable="true":selected="shapeElelement === shape"@click="handleShapeChange(shapeElelement)">{{ shapeElelement || "None" }}</kbutton></kbuttongroup></div></k-label></span><span class="k-form-field"><k-label>Size<div class="k-form-field-wrap"><dropdownlist:data-items="sizes":value="size":style="{'min-width': '120px',}"@change="handleSizeChange"/></div></k-label></span><span class="k-form-field"><k-label>Theme Color<div class="k-form-field-wrap"><dropdownlist:data-items="themeColors":value="themeColor":item-render="'colorItemRender'":style="{'min-width': '150px',}"@change="handleThemeColorChange"><template v-slot:colorItemRender="{ props }"><li:class="props.itemClass"@click="(ev) => props.onClick(ev)":style="{display: 'flex',alignItems: 'center',justifyContent: 'space-between',}">{{ props.dataItem }}{{ ' ' }}<span:style="{width: '16px',height: '16px',background: 'currentColor',display: 'inline-block',}":class="['k-color-' + props.dataItem]"></span></li></template></dropdownlist></div></k-label></span><span class="k-form-field"><k-label>Fill Mode<div class="k-form-field-wrap"><dropdownlist:data-items="fillModes":value="fillMode":style="{'min-width': '120px',}"@change="handleFillModeChange"/></div></k-label></span><span class="k-form-field"><k-label>Border Radius<div class="k-form-field-wrap"><dropdownlist:data-items="roundedOptions":value="rounded":style="{'min-width': '120px',}"@change="handleRoundedChange"/></div></k-label></span></div></div></template><script>import { Label } from "@progress/kendo-vue-labels";import { ButtonGroup, Button } from "@progress/kendo-vue-buttons";import { DropDownList } from "@progress/kendo-vue-dropdowns";export default {components: {"k-label": Label,"kbutton": Button,"k-buttongroup": ButtonGroup,dropdownlist: DropDownList,},props: {shape: String,size: String,themeColor: String,fillMode: String,rounded: String,},emits: ["shapechange","sizechange","themecolorchange","fillmodechange","roundedchange",],data() {return {shapes: ["rectangle", "square"],sizes: ["small", "medium", "large"],themeColors: ["base","primary","secondary","tertiary","info","success","warning","error","dark","light","inverse",],fillModes: ["solid", "outline", "flat", "clear", "link"],roundedOptions: ["small", "medium", "large", "full"],};},methods: {handleShapeChange(shape) {this.$emit("shapechange", shape);},handleSizeChange(event) {this.$emit("sizechange", event);},handleThemeColorChange(event) {this.$emit("themecolorchange", event);},handleFillModeChange(event) {this.$emit("fillmodechange", event);},handleRoundedChange(event) {this.$emit("roundedchange", event);},},};</script>

大小

Button 的大小是通过其 size 属性控制的，可以传递给属性的值如下：

• small — 将padding设置为 2px 和 8px。
• medium（默认）- 将padding设置为 4px 和 8px。
• large — 将padding设置为 6px 和 8px。
• null — 将 null 传递给 size 属性使我们可以选择定义一个自定义 CSS 类来设置 Button 的padding。

以下示例演示了每个大小选项的用法：

main.vue

<template><div><span class="wrapper"><kbutton :size="'small'">Small Size</kbutton></span><span class="wrapper"><kbutton :size="'medium'">Medium Size</kbutton></span><span class="wrapper"><kbutton :size="'large'">Large Size</kbutton></span><span class="wrapper"><kbutton :size="null" :class="'custom-size'">Custom Size</kbutton></span></div></template><script>import { Button } from '@progress/kendo-vue-buttons';export default {components: {kbutton: Button,}};</script><style>.custom-size.k-button {padding: 20px 20px;}.wrapper {padding: 20px;}</style>

main.js

import { createApp } from 'vue'import App from './main.vue'createApp(App).mount('#app')

形状

Button 的形状通过其 shape 属性进行控制，可以传递给属性的值如下：

• rectangle（默认）— 根据rectangle选项设置形状。
• square — 根据square选项设置形状。
• null — 将 null 传递给形状会删除 Button 的内置形状。

以下示例演示了每个形状选项的用法：

main.vue

<template><div><span class="wrapper"><kbutton :shape="'rectangle'">Rectangle shape</kbutton></span><span class="wrapper"><kbutton :shape="'square'">Square shape</kbutton></span></div></template><script>import { Button } from '@progress/kendo-vue-buttons';export default {components: {kbutton: Button,},};</script><style>.wrapper {padding: 20px;}</style>

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    欢迎一起进群讨论