Button / 按钮
用于触发一个操作。
基础的
基础的 Button
包含一个动画效果。
加载中
表示正在运行或加载中的状态。
禁用的
不对任何操作进行响应。
阴影
使用阴影突出显示更高层级的按钮。
类型
不同状态下的按钮。
反色
底色与主色相反的透明按钮。
伸缩性
不同大小的按钮组件。
图标
按钮内的图标色彩和大小将会被自动设置。
APIs / 接口文档
Button.Props
属性 | 描述 | 类型 | 推荐值 | 默认 |
---|---|---|---|---|
type | 按钮的类型 | ButtonTypes | ButtonTypes | default |
ghost | 是否为反色按钮 | boolean | - | false |
loading | 是否显示加载中的指示器 | boolean | - | false |
shadow | 是否显示阴影 | boolean | - | false |
auto | 自动缩放宽度 | boolean | - | false |
effect | 是否显示动画效果 | boolean | - | true |
disabled | 是否禁用按钮 | boolean | - | false |
onClick | 点击事件 | MouseEventHandler | - | - |
icon | 在按钮内显示图标 | ReactNode | - | - |
iconRight | 在按钮右侧显示图标 | ReactNode | - | - |
htmlType | 按钮的原生类型属性 | ButtonHTMLAttributes.type | - | button |
ref | Ref 转发 | Ref<HTMLButtonElement | null> | - | - |
... | 原生属性 | ButtonHTMLAttributes | 'id', 'className', ... | - |
ButtonTypes
type ButtonTypes =
| 'default'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'abort'
| 'secondary-light'
| 'success-light'
| 'warning-light'
| 'error-light'
文档贡献者