Vigour

# 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 -

← Icon 图标 →