首页 > 其他分享> 文章详细

如何把自己开发的按钮变得更好看？这个组件不能错过

2022-08-11 10:00:08 阅读：190 来源： 互联网

标签：vue Button 错过 shape 按钮组件 import main event

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

本文将提供有关在应用其属性的不同配置时组件如何更改的详细信息。

Kendo UI最新官方正式版下载

配置器演示

以下示例演示如何通过配置器配置 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' }">
<span
class="k-color-primary"
:style="{ textTransform: 'uppercase', padding: '4px 0' }"
>Configurator</span
>
</div>
<div
class="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>
<kbutton
v-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 欢迎一起进群讨论

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

标签：vue,Button,错过,shape,按钮,组件,import,main,event
来源： https://www.cnblogs.com/AABBbaby/p/16574920.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

如何把自己开发的按钮变得更好看？这个组件不能错过

配置器演示

大小

形状