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

<template>
<div>
<span class="wrapper">
<kbutton>No roundness</kbutton>
</span>
<span class="wrapper">
<kbutton :rounded="'small'">Small roundness</kbutton>
</span>
<span class="wrapper">
<kbutton :rounded="'medium'">Medium roundness</kbutton>
</span>
<br />
<br />
<span class="wrapper">
<kbutton :rounded="'large'">Large roundness</kbutton>
</span>
<span class="wrapper">
<kbutton :rounded="'full'">Full roundness</kbutton>
</span>
<span class="wrapper">
<kbutton :size="null" :class="'custom-roundness'">Custom 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;
}
</style>

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

<template>
<div>
<span class="wrapper">
<kbutton :fill-mode="'solid'">Solid</kbutton>
</span>
<span class="wrapper">
<kbutton :fill-mode="'flat'">Flat</kbutton>
</span>
<span class="wrapper">
<kbutton :fill-mode="'outline'">Outline</kbutton>
</span>
<span class="wrapper">
<kbutton :fill-mode="'clear'">Clear</kbutton>
</span>
<span class="wrapper">
<kbutton :fill-mode="'link'">Link</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')

主題顏色

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

<template>
<div>
<span class="wrapper">
<kbutton :theme-color="'base'">base</kbutton>
</span>
<span class="wrapper">
<kbutton :theme-color="'primary'">primary</kbutton>
</span>
<span class="wrapper">
<kbutton :theme-color="'secondary'">secondary</kbutton>
</span>
<span class="wrapper">
<kbutton :theme-color="'tertiary'">tertiary</kbutton>
</span>
<br />
<br />
<span class="wrapper">
<kbutton :theme-color="'info'">info</kbutton>
</span>
<span class="wrapper">
<kbutton :theme-color="'success'">success</kbutton>
</span>
<span class="wrapper">
<kbutton :theme-color="'warning'">warning</kbutton>
</span>
<span class="wrapper">
<kbutton :theme-color="'error'">error</kbutton>
</span>
<br />
<br />
<span class="wrapper">
<kbutton :theme-color="'dark'">dark</kbutton>
</span>
<span class="wrapper">
<kbutton :theme-color="'light'">light</kbutton>
</span>
<span class="wrapper">
<kbutton :theme-color="'inverse'">inverse</kbutton>
</span>
<span class="wrapper">
<kbutton :theme-color="null" :class="'custom-color'">custom</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;
}
</style>

main.js

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

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

Telerik_KendoUI產品技術交流群：726377843    歡迎一起進群討論