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

在上文中，我们为大家介绍了如何配置器演示、按钮大小形状设置等，如何把自己开发的按钮变得更好看？这个组件不能错过

Kendo UI官方最新版免费下载试用，历史版本下载，在线文档和帮助文件下载-慧都网

圆度

Button的圆度通过其rounded属性控制，可以传递给属性的值如下：

• small — 将border radius设置为1px。
• medium（默认） — 将border radius设置为2px。
• large — 将border radius设置为4px。
• full — 将border radius设置为9999px。
• null — 将 null 传递给 rounded 属性使我们可以选择定义自定义 CSS 类，该类定义按钮的border-radius。

以下示例演示了每个舍入选项的用法：

main.vue

main.js

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

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

填充模式

Button的样式是通过其 fillMode 属性控制的，可以传递给属性的值如下：

• solid（默认） — 设置一个background颜色和solid borders。
• flat — 在默认状态下设置transparent background和borders，在焦点状态下设置background color。
• outline — 设置transparent background 和 solid borders。
• clear — 在默认状态下设置transparent background和borders，在焦点状态下设置background color。
• link — 设置transparent background 和 solid borders。
• null — 将 null 传递给 fillMode 属性使我们可以选择定义自定义 CSS 类，该类定义按钮的background和border。

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

main.vue

main.js

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

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

主题颜色

Button 的颜色是通过其 themeColor 属性控制的。

• base（默认） — Button 的颜色将基于base主题颜色。
• primary — Button 的颜色将基于primary主题颜色。
• secondary — Button 的颜色将基于thesecondary主题颜色。
• tertiary — Button 的颜色将基于tertiary主题颜色。
• info — Button 的颜色将基于info 主题颜色。
• success — Button 的颜色将基于success主题颜色。
• warning — Button 的颜色将基于warning主题颜色。
• error — Button 的颜色将基于error主题颜色。
• dark — Button 的颜色将基于dark主题颜色。
• light — Button 的颜色将基于light主题颜色。
• inverse — Button 的颜色将基于inverse主题颜色。
• null — 将 null 传递给 themeColor 属性使我们可以选择定义一个自定义 CSS 类来设置按钮的外观。

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

main.vue

main.js

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

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