official/public/docset/ui/wc-button.md

## WC-BUTTON
> 常用的按钮组件。


### 基础用法

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/button.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-button type="primary">Primary Button</wc-button>
  <wc-button type="info">Info Button</wc-button>
  <wc-button type="success">Success Button</wc-button>
  <wc-button type="warning">Warning Button</wc-button>
</wc-space>
<wc-space>
  <wc-button>Normal Button</wc-button>
  <wc-button type="help">Help Button</wc-button>
  <wc-button type="secondary">Secondary Button</wc-button>
  <wc-button type="danger">Danger Button</wc-button>
</wc-space>
  </wc-lang>
</wc-sandbox>


### 尺寸大小

6种尺寸规则的按钮, 如果不满足自己的需求, 可以自行设置`width`和`height`。

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/button.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-button size="xxxl">xxxl Size</wc-button>
  <wc-button size="xxl">xxl Size</wc-button>
  <wc-button size="xl">xl Size</wc-button>
  <wc-button>Deault Size</wc-button>
  <wc-button size="m">Medium Size</wc-button>
  <wc-button size="s">small Size</wc-button>
</wc-space>
  </wc-lang>
</wc-sandbox>


### 颜色&样式&形状
可通过设置`type`属性修改按钮样式, 还可通过`solid`属性将按钮改成实心, 另外, `round`和`circle`这2个属性, 可以让按钮变成圆角和圆形。

如果有其他半径需求, 可以直接通过css设置`border-radius`。


`注:` circle属性会让移除掉按钮内文字, 只能用图标


<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/button.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-button type="info">type=info</wc-button>
  <wc-button type="danger">type=info</wc-button>
  <wc-button solid type="info">type=info</wc-button>
  <wc-button solid type="danger">type=info</wc-button>
</wc-space>
<wc-space>
  <wc-button type="info" round>圆角矩形</wc-button>
  <wc-button type="secondary" circle icon="edit"></wc-button>
</wc-space>
  </wc-lang>
</wc-sandbox>



### 状态
按钮有2种状态, `loading` 和 `disabled`, 这2种状态下, 都不能点击, 也无法获取焦点。

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/button.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-button loading>Loading Status</wc-button>
  <wc-button disabled>Disabled Status</wc-button>
  <wc-button solid loading>Loading Status</wc-button>
  <wc-button solid disabled>Disabled Status</wc-button>
</wc-space>
  </wc-lang>
</wc-sandbox>



### 图标
按钮可通过`icon`属性, 增加前置图标, 图标的名字, 参考前面的章节。

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/button.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-space>
  <wc-button icon="edit">编辑</wc-button>
  <wc-button type="danger" icon="trash">删除</wc-button>
  <wc-button type="info" icon="load">静态菊花图标</wc-button>
  <wc-button type="success" icon="loading">动态加载图标</wc-button>
  <wc-button type="success" icon="fly">提交</wc-button>
</wc-space>
  </wc-lang>
</wc-sandbox>



### 完整APIs

|  属性  |  值类型  |   默认值   |     描述   |
|  :-:  |   :-:   |   :-:   |     -   |
|  type  |  String  |   无   |   按钮类型, 仅能决定按钮的颜色, 无额外作用, 可选值有: `primary、info、success、warning、default、secondary、danger`   |
|  size  |   String   |  default   |   按钮尺寸, 可选值有: `xxxl、xxl、xl、l、m、s`   |
|  loading  |   Boolean  | false   |  按钮的加载状态, 为`true`时, 按钮会呈现loading动画, 且按钮点击事件无效 |
|  disbaled  |   Boolean  | false   |  按钮的禁用状态, 为`true`时, 按钮点击事件无效 |
|  icon  |   String  |  无   |  为按钮设置前置图标 |
|  round  |   无  |  无   |  为按钮设置大圆角半径。 不需要赋值   |
|  circle  |   无  |  无   |  设置为正圆按钮, 且会让文字失效。 不需要赋值   |
|  autofocus  |   无  |  无   |  让按钮自动获得焦点。 不需要赋值   |
|  lazy  |   Number  |  0   |  为按钮设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发点击事件  |