display: Stepper family: navigation
Stepper
显示一个任务的进度；或者引导用户完成某个复杂任务。
API
Props
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| current | 当前步骤，从 0 开始记数 | number | 0 |
| shape | 形态， 可选值： circle, dot
|
enum | circle |
| direction | 方向， 可选值： horizontal, vertical
|
enum | vertical |
| steps | 步骤内容 | Step[] | |
| renderStepContent | 渲染步骤内容 | (props: StepProps) => RaxNode |
Step
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | RaxNode | |
| content | 内容 | RaxNode | |
| icon | 图标 | string |
StepProps
|名称 | 说明 | 类型 | 默认值 |
| status | 状态
可选值：
awaiting, processing, finished | enum | awaiting |
| shape | 形态，
可选值：
circle, dot | enum | circle |
| direction | 方向，
可选值：
horizontal, vertical | enum | vertical |
| index | 步骤序号，从 0 开始 | number | |
| last | 是否是最后一个步骤 | boolean | |
| title | 标题 | RaxNode | |
| content | 内容 | RaxNode | |
| icon | 图标| string | |
CSS API
| 名称 | 说明 |
|---|---|
| stepper | 步骤条样式 |
| stepper--horizontal |
direction="horizontal" 时步骤条样式 |
| stepper--vertical |
direction="vertical" 时步骤条样式 |
| stepper__step | 步骤样式 |
| stepper--horizontal__step |
direction="horizontal" 步骤样式 |
| stepper--vertical__step |
direction="vertical" 时步骤样式 |
| stepper__step__header | 步骤头部样式 |
| stepper--horizontal__step__header |
direction="horizontal" 时步骤头部样式 |
| stepper--vertical__step__header |
direction="vertical" 时步骤头部样式 |
| stepper__step__connector | 步骤连接线样式 |
| stepper--horizontal__step__connector |
direction="horizontal" 时步骤连接线样式 |
| stepper--vertical__step__connector |
direction="vertical" 时步骤连接线样式 |
| stepper--horizontal__step--finished__connector |
direction="horizontal" 时已完成步骤连接线样式 |
| stepper--vertical__step--finished__connector |
direction="vertical" 时已完成步骤连接线样式 |
| stepper__step__node | 步骤节点样式 |
| stepper__step--finished__node | 已完成步骤节点样式 |
| stepper__step--processing__node | 正在进行的步骤节点样式 |
| stepper--horizontal__step__node |
direction="horizontal" 时步骤节点样式 |
| stepper--vertical__step__node |
direction="vertical" 时步骤节点样式 |
| stepper__step__icon | 步骤节点图标样式 |
| stepper__step--finished__icon | 已完成步骤节点图标样式 |
| stepper__step--processing__icon | 正在进行的步骤节点图标样式 |
| stepper__step__number | 步骤节点数字样式 |
| stepper__step--finished__number | 已完成步骤节点数字样式 |
| stepper__step--processing__number | 正在进行的步骤节点数字样式 |
| stepper__step__body | 步骤内容容器样式 |
| stepper--horizontal__step__body |
direction="horizontal" 时步骤内容容器样式 |
| stepper--vertical__step__body |
direction="vertical" 时步骤内容容器样式 |
| stepper__step__title | 步骤标题样式 |
| stepper__step--finished__title | 已完成步骤标题样式 |
| stepper__step--processing__title | 正在进行的步骤标题样式 |
| stepper__step__content | 步骤内容样式 |
| stepper__step--finished__content | 已完成步骤内容样式 |
| stepper__step--processing__content | 正在进行的步骤内容样式 |