@rax-ui/stepper NPM

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

CSS API

名称	说明
stepper	步骤条样式
stepper--horizontal	`direction="horizontal"` 时步骤条样式
stepper--vertical	`direction="vertical"` 时步骤条样式
stepper__step	步骤样式
stepper--horizontal__step	`direction="horizontal"` 步骤样式
stepper--vertical__step	`direction="vertical"` 时步骤样式
stepperstepheader	步骤头部样式
stepper--horizontalstepheader	`direction="horizontal"` 时步骤头部样式
stepper--verticalstepheader	`direction="vertical"` 时步骤头部样式
stepperstepconnector	步骤连接线样式
stepper--horizontalstepconnector	`direction="horizontal"` 时步骤连接线样式
stepper--verticalstepconnector	`direction="vertical"` 时步骤连接线样式
stepper--horizontalstep--finishedconnector	`direction="horizontal"` 时已完成步骤连接线样式
stepper--verticalstep--finishedconnector	`direction="vertical"` 时已完成步骤连接线样式
stepperstepnode	步骤节点样式
stepperstep--finishednode	已完成步骤节点样式
stepperstep--processingnode	正在进行的步骤节点样式
stepper--horizontalstepnode	`direction="horizontal"` 时步骤节点样式
stepper--verticalstepnode	`direction="vertical"` 时步骤节点样式
stepperstepicon	步骤节点图标样式
stepperstep--finishedicon	已完成步骤节点图标样式
stepperstep--processingicon	正在进行的步骤节点图标样式
stepperstepnumber	步骤节点数字样式
stepperstep--finishednumber	已完成步骤节点数字样式
stepperstep--processingnumber	正在进行的步骤节点数字样式
stepperstepbody	步骤内容容器样式
stepper--horizontalstepbody	`direction="horizontal"` 时步骤内容容器样式
stepper--verticalstepbody	`direction="vertical"` 时步骤内容容器样式
steppersteptitle	步骤标题样式
stepperstep--finishedtitle	已完成步骤标题样式
stepperstep--processingtitle	正在进行的步骤标题样式
stepperstepcontent	步骤内容样式
stepperstep--finishedcontent	已完成步骤内容样式
stepperstep--processingcontent	正在进行的步骤内容样式