Kendo UI for Vue原生组件——Button 提供了一组预定义的外观选项。除了 Button 的默认外观之外这些替代样式选项使您能够配置组件外观的每个单独方面。在上文中我们为大家介绍了如何配置器演示、按钮大小形状设置等。圆度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.vuetemplate div span classwrapper kbuttonNo roundness/kbutton /span span classwrapper kbutton :roundedsmallSmall roundness/kbutton /span span classwrapper kbutton :roundedmediumMedium roundness/kbutton /span br / br / span classwrapper kbutton :roundedlargeLarge roundness/kbutton /span span classwrapper kbutton :roundedfullFull roundness/kbutton /span span classwrapper kbutton :sizenull :classcustom-roundnessCustom roundness/kbutton /span /div /template script import { Button } from progress/kendo-vue-buttons; export default { components: { kbutton: Button, } }; /script style .custom-roundness.k-button { border-top-right-radius: 15px; border-top-left-radius: 15px; } .wrapper { padding: 20px; } /stylemain.jsimport { 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.vuetemplate div span classwrapper kbutton :fill-modesolidSolid/kbutton /span span classwrapper kbutton :fill-modeflatFlat/kbutton /span span classwrapper kbutton :fill-modeoutlineOutline/kbutton /span span classwrapper kbutton :fill-modeclearClear/kbutton /span span classwrapper kbutton :fill-modelinkLink/kbutton /span /div /template script import { Button } from progress/kendo-vue-buttons; export default { components: { kbutton: Button, }, }; /script style .wrapper { padding: 20px; } /stylemain.jsimport { 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.vuetemplate div span classwrapper kbutton :theme-colorbasebase/kbutton /span span classwrapper kbutton :theme-colorprimaryprimary/kbutton /span span classwrapper kbutton :theme-colorsecondarysecondary/kbutton /span span classwrapper kbutton :theme-colortertiarytertiary/kbutton /span br / br / span classwrapper kbutton :theme-colorinfoinfo/kbutton /span span classwrapper kbutton :theme-colorsuccesssuccess/kbutton /span span classwrapper kbutton :theme-colorwarningwarning/kbutton /span span classwrapper kbutton :theme-colorerrorerror/kbutton /span br / br / span classwrapper kbutton :theme-colordarkdark/kbutton /span span classwrapper kbutton :theme-colorlightlight/kbutton /span span classwrapper kbutton :theme-colorinverseinverse/kbutton /span span classwrapper kbutton :theme-colornull :classcustom-colorcustom/kbutton /span /div /template script import { Button } from progress/kendo-vue-buttons; export default { components: { kbutton: Button, } }; /script style .wrapper { padding: 20px; } .custom-color { background-color: green; color: orange; } /stylemain.jsimport { createApp } from vue import App from ./main.vue createApp(App).mount(#app)