Button 按钮
基础用法(state)
按钮类型(type)
块级形状(block)
按钮禁用(disabled)
按钮大小(size)
htmlType
按钮形状(shape)
loading
按钮组
属性(Attributes)
| 属性 | 描述 | 类型 | 值 | 默认 |
|---|---|---|---|---|
| state | 按钮的状态 | string | primary / success / warning / danger | primary |
| type | 按钮的类型 | string | normal / secondary / dashed / text / link | normal |
| block | 是否是块级按钮 | boolean | false/true | false |
| disabled | 按钮是否禁用 | boolean | false/true | false |
| size | 按钮的大小 | string | mini / small / medium / large | small |
| htmlType | html 原生 type | string | button / submit / reset | button |
| shape | 按钮的圆角 | string | square/round/circle | square |
| loading | 是否加载 | Boolean | false/true | false |
插槽(slot)
| 名称 | 描述 |
|---|---|
| default | 默认插槽 |
变量(cssVariables)
| 变量名 | 变量值 | 描述 |
|---|---|---|
| --line-height | 1.5715*1em | 文字行高 |
| --time-1 | 0.1s | 动画时间 |
| --font-weight-5 | 500 | font-weight文字粗细 |
| --border-1 | 1px | border |
| --font-body-3 | 14px | font-size |
| --border-radius-4 | 4px | border-radius |
| --text-0 | -- | normal 类型时 button 字体颜色 |
--state-6 | -- | state 类型时 button 常规 背景色边框色 |
--state-5 | -- | state 类型时 button hover/focus 背景色边框色 |
--state-7 | -- | state 类型时 button active 背景色边框色 |
--state-3 | -- | state 类型时 button 禁用 背景色边框色 字体色(normal 字体色用的 --text-0) |
| --border-radius-square | 2px | button 默认圆角 |
| --border-radius-round | 16px | button 弧形圆角 |
| --border-radius-circle | 50% | 圆形 |
| --size-mini | 24px | 组件高度 size 为 mini |
| --size-samll | 28px | 组件高度 size 为 samll |
| --size-medium | 32px | 组件高度 size 为 medium |
| --size-large | 36px | 组件高度 size 为 large |
| --padding-1 | 11px | 组件高度 size 为 mini |
| --padding-3 | 13px | 组件高度 size 为 samll |
| --padding-3 | 13px | 组件高度 size 为 medium |
| --padding-4 | 14px | 组件高度 size 为 large |