# Button 按钮
# Example
import { button } from 'vigour';
// button.name === 'vigour-button'
# Kinds
You can change the style of the button through the kind
property, which defaults to kind
.
通过 kind
属性,你可以改变按钮的样式,该属性默认是 normal
。
<vigour-button>Default</vigour-button>
<vigour-button kind="primary">Primary</vigour-button>
<vigour-button kind="normal">Normal</vigour-button>
<vigour-button kind="danger">Normal</vigour-button>
# Icons
Through the icon
attribute, you can add icon to the button. For more icon names, please refer to the documentation page of the Icon component.
通过 icon
属性,你可以给按钮添加 icon,具体更多 icon 名字请查阅 Icon 组件的文档页面。
<vigour-button icon="loading">Loading</vigour-button>
<vigour-button icon="settings">Settings</vigour-button>
<vigour-button icon="download" kind="primary">Download</vigour-button>
# Icon Position
Through the left
attribute, you can set the location where the icon appears, and the default value of this attribute is left
.
通过 icon-position
属性,你可以设置 icon 出现的位置,该属性的默认值为 left
。
<vigour-button icon="thumbs-up">Thumbs Up</vigour-button>
<vigour-button icon="upload" icon-position="left" kind="primary">Upload</vigour-button>
<vigour-button icon="upload" icon-position="right">Upload</vigour-button>
<vigour-button icon="loading" icon-position="right">Hello</vigour-button>
# Loading
When the loading
attribute is set to true
, the icon
attribute will be replaced with loading
.
设置 loading
属性为 true
后,icon
属性会被替换为 loading
。
<vigour-button icon="loading">Loading</vigour-button>
<vigour-button
icon="settings"
:loading="loading"
@click="loading = !loading"
>Settings</vigour-button
>
<vigour-button
icon="thumbs-up"
kind="primary"
icon-position="right"
:loading="loading"
@click="loading = !loading"
>Thumbs Up</vigour-button
>
<vigour-button icon="upload" :loading="loading" @click="loading = !loading"
>Upload</vigour-button
>
<vigour-button
icon="download"
:loading="loading"
@click="loading = !loading"
>Download</vigour-button
>
# Button Group
The vigour-button- group
component eliminates the gap between buttons and adds border-radius
.
vigour-button-group
组件可以消除按钮间的间隙并且添加 border-radius
。
import { buttonGroup } from 'vigour';
// buttonGroup.name === 'vigour-button-group'
<vigour-button-group>
<vigour-button icon="thumbs-up" icon-position="right"
>Thumbs Up</vigour-button
>
<vigour-button icon="upload">Upload</vigour-button>
<vigour-button icon="download">Download</vigour-button>
</vigour-button-group>
# Disabled
<vigour-button disabled>hello</vigour-button>
# Props
prop | type | default value | available value |
---|---|---|---|
kind | string | 'normal' | 'primary' ,'normal' |
icon | string | - | - |
icon-position | string | 'left' | 'left' ,'right' |
loading | boolean | true | - |