Button 按钮
该组件基于官方的 button 组件
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 尺寸 | string | default / small / mini | |
| type | 类型 | string | primary / success / error / warning / info / text | |
| plain | 是否朴素按钮 | boolean | false | |
| round | 是否圆角按钮 | boolean | false | |
| loading | 是否加载中 | boolean | false | |
| loading-theme | 加载图标主题 | string | ||
| loading-color | 加载图标颜色 | string | ||
| disabled | 是否禁用状态 | boolean | false | |
| round | 是否圆角 | boolean | ||
| border | 是否需要边框 | boolean | true | |
| border-radius | 边框圆角 | number | 10 | |
| fill | 是否宽度填充 | boolean | false | |
| icon | 图标类名 | boolean | ||
| height | 高 | number | 64 | |
| width | 宽 | number | auto | |
| margin | 外间距 | string, number, Array | ||
| fontSize | 字体大小 | number | 26 | |
| color | 字体颜色 | string | ||
| background-color | 背景颜色 | string |
示例
基本用法
<cl-button>默认按钮</cl-button>
不同类型
<cl-button type="primary">主要</cl-button>
<cl-button type="success">成功</cl-button>
<cl-button type="error">错误</cl-button>
<cl-button type="warning">警告</cl-button>
<cl-button type="info">信息</cl-button>
<cl-button type="text">文本</cl-button>
不同状态
<cl-button type="primary" plain>朴素</cl-button>
<cl-button round>圆角</cl-button>
<cl-button loading>加载中</cl-button>
<cl-button type="primary" shadow fill>阴影</cl-button>
<cl-button type="warning" fill>填充</cl-button>
带图标
<cl-button icon="cl-icon-search">默认</cl-button>
<cl-button icon="cl-icon-good-fill">点赞</cl-button>