按钮 Button
这是什么?按一下。这是什么?按一下...
样式
使用 type 属性改变按钮类型。(不同类型只在颜色上有区别)
添加 plain 属性显示为 二级按钮,添加 text 属性显示为 文字按钮。
形状
使用 shape 属性改变按钮形状。
square - 矩形按钮,round - 圆角按钮,circle - 圆形按钮。
大小
使用 size 属性改变按钮的大小。
提供 small、medium、large 三种尺寸,也可以自定义大小。
图标
使用 icon 属性设置按钮的图标。使用 right-icon 属性可以设置右侧的图标。
加载中
添加 loading 属性,按钮就会显示为加载状态,也可以动态设置。
长按钮
添加 long 属性,按钮的宽度会占满父元素。
禁用
添加 disabled 属性,按钮就会被禁用。
按钮组
可以把多个按钮放在按钮组里面,通过 type 和 size 属性统一控制样式。
API
Button 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | string | default | 按钮类型 |
| size | string | medium | 按钮大小 |
| shape | string | square | 按钮形状 |
| icon | string | — | 按钮图标 |
| right-icon | string | — | 按钮右侧图标 |
| plain | boolean | false | 是否为二级按钮 |
| text | boolean | false | 是否为文字按钮 |
| bg | boolean | false | 文字按钮是否显示背景 |
| long | boolean | false | 是否为长按钮 |
| loading | boolean | false | 按钮是否在加载 |
| disabled | boolean | false | 按钮是否禁用 |
Button 插槽
| 名称 | 说明 |
|---|---|
| default | 自定义按钮内容 |
Button Group 属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | string | default | 统一控制按钮类型 |
| size | string | medium | 统一控制按钮大小 |
Button Group 插槽
| 名称 | 说明 |
|---|---|
| default | 放置按钮组件 |