Steps 步骤条
引导用户按照流程完成任务的导航条。
获取组件
import { Steps } from 'rsuite';
// or
import Steps from 'rsuite/Steps';演示
默认
设置标题
设置描述
垂直布局
设置错误状态
设置小尺寸
自定义图标
动态展示
Props
<Steps>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| classPrefix | string ('steps') |
组件 CSS 类的前缀 |
| current | number(0) |
当前执行步骤 |
| currentStatus | 'finish' | 'wait' | 'process' | 'error' ('process') |
当前执行步骤状态 |
| small | boolean | 设置小尺寸的步骤条 |
| vertical | boolean | 设置垂直显示 |
<Steps.Item>
| 属性名称 | 类型 (默认值) |
描述 |
|---|---|---|
| classPrefix | string ('steps-item') |
组件 CSS 类的前缀 |
| description | ReactNode | 设置描述 |
| icon | Element<typeof Icon> , | 设置小尺寸的步骤条 |
| status | 'finish' | 'wait' | 'process' | 'error' | 步骤状态 |
| title | ReactNode | 设置标题 |