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 | 正在进行的步骤内容样式 |