按钮 Button
一个常见的按钮，是用于触发功能的控件。
按钮主题
按钮有 'primary'（默认）、'success'、'warning'、'danger'、'info'、'sakura'、'notice' 多种主题。
隐藏源代码
按钮变体
按钮有 'primary'（默认）、'plain'、'outline'、'text' 四种样式变体。
隐藏源代码
按钮形状
按钮有 'rect'（默认）、'round'、'circle'、'square' 四种形状。
隐藏源代码
按钮尺寸
可以设置 size 属性改变按钮的样式，有 'medium'（默认）、'small'、'large' 三种。
隐藏源代码
禁用状态
disabled 设置按钮禁用。
隐藏源代码
加载状态
loading 设置按钮是否处于加载状态，加载状态时按钮的原生属性 disabled="true"，不会响应 click 事件。
隐藏源代码
按钮图标
icon 插槽设置按钮图标。
隐藏源代码
占据整行
设置 block 属性可以使得按钮占据整行。
隐藏源代码
自定义颜色
自定义主色，内部基于此生成完整色板，该色板优先级高于 theme 提供的预设色版。详见 支持的颜色解析。
隐藏源代码
圆角边框
borderRadius 设置按钮圆角，优先级高于 shape，与 CSS border-radius 行为一致。
精力和技术力不太充足，自定义圆角还有需要优化的地方，但整体不影响使用。
- 单值或长度为 1 的数组 → 四角同时生效；
- 长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；
- 长度为 3 的数组 → [左上, 右上 & 左下, 右下]；
- 长度为 4 的数组 → 按顺时针顺序依次作用于四角。
隐藏源代码
按钮组
使用 ButtonGroup 组件可以像这样子把按钮放在一起。
隐藏源代码
API
ButtonProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | 是 | | 圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。 | 0.0.0-beta |
| shape | 'rect' | 'round' | 'circle' | 'square' | 是 | 'rect' | 按钮形状。 | 0.0.3 |
| size | 'medium' | 'large' | 'small' | 是 | 'medium' | 按钮尺寸。 | 0.0.0-beta |
| disabled | boolean | 是 | false | 是否禁用。 | 0.0.0-beta |
| loading | boolean | 是 | false | 是否加载状态。 | 0.0.0-beta |
| variant | 'primary' | 'plain' | 'text' | 'outline' | 是 | 'primary' | 按钮样式变体。 | 0.0.0-beta |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice' | 是 | 'primary' | 按钮主题。 | 0.0.0-beta |
| color | string | 是 | | 自定义主色，内部基于此生成完整色板，该色板优先级高于 theme 提供的预设色版。详见 支持的颜色解析。 | 0.0.0-beta |
| block | boolean | 是 | false | 是否占据整行。 | 0.0.0-beta |
| nativeType | 'button' | 'submit' | 'reset' | 是 | 'button' | HTML <button> 原生 type 属性。 | 0.0.0-beta |
| autofocus | boolean | 是 | false | HTML <button> 原生 autofocus 属性。 | 0.0.0-beta |
| pollSizeChange | boolean | 是 | false | 开启轮询组件尺寸变化，可能会影响性能。 | 0.1.0 |
ButtonEvents
| 事件 | 参数 | 描述 | 版本 |
|---|---|---|---|
| click | e: MouseEvent | 点击事件。 | 0.0.0-beta |
ButtonSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | 按钮内容。 | 0.0.0-beta |
| icon | | 按钮图标。 | 0.0.0-beta |
ButtonGroupProps
| 属性 | 类型 | 可选 | 默认值 | 描述 | 版本 |
|---|---|---|---|---|---|
| borderRadius | NumberOrPercentage | NumberOrPercentage[] | 是 | | 圆角半径，优先级高于 shape，将覆盖 Button 子组件的 borderRadius，圆角仅作用于两侧 Button 子组件的外侧边框。与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。 | 0.0.0-beta |
| shape | 'rect' | 'round' | 'square' | 'circle' | 是 | | 按钮形状，将覆盖 Button 子组件的 shape，圆角仅作用于两侧 Button 子组件的外侧边框。 | 0.0.0-beta |
| size | 'medium' | 'large' | 'small' | 是 | 'medium' | 按钮尺寸，将覆盖 Button 子组件的 size。 | 0.0.3 |
| disabled | boolean | 是 | false | 是否禁用，Button 子组件的 disabled 和当前属性取或，决定该子组件是否禁用。 | 0.0.0-beta |
| loading | boolean | 是 | false | 是否加载状态，Button 子组件的 loading 和当前属性取或，决定该子组件是否加载状态。 | 0.0.0-beta |
| variant | 'primary' | 'plain' | 'text' | 'outline' | 是 | | 按钮样式变体，Button 子组件的 variant 和当前属性取或，决定该子组件的样式变体。 | 0.0.0-beta |
| theme | 'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info' | 'notice' | 是 | | 按钮组的主题。 | 0.0.0-beta |
| pollSizeChange | boolean | 是 | false | 开启轮询组件尺寸变化，会影响 Button 子组件的同名属性。 | 0.1.0 |
ButtonGroupSlots
| 插槽 | 参数 | 描述 | 版本 |
|---|---|---|---|
| default | | 子按钮。 | 0.0.0-beta |
NumberOrPercentage
ts
export type NumberOrPercentage = number | `${number}%`1