Button 按钮
常用的操作按钮，按钮组合，按钮布局。
<Button>是组件中最基础的元素，可以快速创建一个带样式的按钮。<IconButton>图标按钮组件。<ButtonGroup>按钮组控件，可以把一组按钮放在一起，并统一控制布局。<ButtonToolbar>按钮工具栏控件。
获取组件
import { Button, IconButton, ButtonGroup, ButtonToolbar } from 'rsuite';演示
默认
外观
appearance 属性设置按钮外观:
- 'default'(默认值) 默认按钮。
- 'primary' 强调按钮，有引导作用的按钮。
- 'link' 像链接一样的按钮。
- 'subtle' 弱化的按钮。
- 'ghost' 幽灵按钮，背景透明，放带有背景元素上的按钮。
按钮尺寸
size 属性设置按钮尺寸, 选项包括:'lg', 'md', 'sm', 'xs'
彩色按钮
color 属性设置按钮样式，选项包括: 'red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'
自定义组合按钮
图标按钮
<IconButton> 是专为图标按钮设计的组件，设置icon属性定义所需要的图标。 只有图标按钮可以设置为一个圆形按钮。
适应容器宽度
一般适用于流式布局，或者在某个容器的顶部、底部撑满整行。
设置一个 block 属性。
禁用状态
激活状态
加载中状态
按钮组
垂直按钮组
按钮工具栏
等宽
按钮在按钮组中横向布局，并且等宽。
Props
<Button>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| active | boolean | 激活状态 |
| appearance | enum: 'default', 'primary', 'link', 'subtle', 'ghost'('default') |
设置外观 |
| block | boolean | 显示为块级元素 |
| children * | React.Node | 组件的内容 |
| classPrefix | string ('btn') |
组件 CSS 类的前缀 |
| color | enum: 'red', 'orange','yellow', 'green', 'cyan', 'blue', 'violet' |
设置颜色 |
| componentClass | React.ElementType ('button') |
为组件自定义元素类型 |
| disabled | boolean | 禁用 |
| href | string | 按钮跳转链接 |
| loading | boolean | 按钮可以显示加载指示器 |
| size | enum: 'lg', 'md', 'sm', 'xs' ('md') |
设置按钮尺寸 |
<IconButton>
IconButton 继承所有 Button 的属性
| 属性名称 | 类型(默认值) |
描述 |
|---|---|---|
| circle | boolean | 设置为圆形按钮 |
| classPrefix | string ('btn-icon') |
组件 CSS 类的前缀 |
| icon | React.Element<typeof Icon> | 设置图标 |
| placement | enum: 'left', 'right' ('left') |
icon 的位置 |
<ButtonGroup>
| 属性名称 | 类型(默认值) |
描述 |
|---|---|---|
| block | boolean | 适应容器宽度 |
| classPrefix | string ('btn-group') |
组件 CSS 类的前缀 |
| justified | boolean | 横向等宽布局 |
| size | enum: lg, md, sm, xs |
设置按钮尺寸 |
| vertical | boolean | 按钮垂直布局 |