| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| current | 当前步骤 | number | 0 | |
| shape | 类型 | StepShape | 'circle' | |
| direction | 展示方向 | StepDirection | 'hoz' | |
| labelPlacement | 横向布局时的内容排列方式 | StepDirection | 'ver' | |
| readOnly | 是否只读模式 | boolean | - | |
| animation | 是否开启动效 | boolean | true | |
| itemRender | 自定义渲染节点 签名: 参数: index: 节点索引 status: 节点状态 title: 节点标题，仅在 shape='circle' 时会传递content: 节点内容，仅在 shape='circle' 时会传递返回值: 节点的渲染结果 |
( index: number, status: StepStatus, title?: ReactNode, content?: ReactNode ) => React.ReactNode |
- | |
| stretch | 宽度是否横向拉伸 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
|---|---|---|---|---|
| status | 步骤的状态，如不传，会根据外层的 Step 的 current 属性生成 | StepStatus | - | |
| title | 标题 | React.ReactNode | - | |
| icon | 图标 | string | - | |
| content | 内容填充，shape 为 arrow 时无效 | React.ReactNode | - | |
| itemRender | StepItem 的自定义渲染，会覆盖父节点设置的 itemRender 签名: 参数: index: 节点索引 status: 节点状态 title: 节点标题，仅在 shape='circle' 时会传递content: 节点内容，仅在 shape='circle' 时会传递返回值: 节点的渲染结果 |
( index: number, status: StepStatus, title?: React.ReactNode, content?: React.ReactNode ) => React.ReactNode |
- | |
| percent | 百分比 | number | - | |
| disabled | 是否禁用 | boolean | - | |
| onClick | 点击步骤时的回调 签名: 参数: index: 节点索引 |
(index: number) => unknown | - |
export type StepDirection = 'hoz' | 'ver';
export type StepStatus = 'wait' | 'process' | 'finish';
export type StepShape = 'circle' | 'arrow' | 'dot';
Step组件有三种类型（shape） shape?: 'arrow' | 'circle' | 'dot';, 其中：
shape='arrow' 只有一种模式；shape='circle' 有两种方向；
direction='ver' 垂直方向direction='hoz' 水平方向，根据文案与图标位置的不同分为两种模式
labelPlacement='hoz' 文案与图标 左右布局labelPlacement='ver' 文案与图标 上下布局shape='dot' 有两种方向；
direction='ver' 垂直方向direction='hoz' 水平方向如果发现 step 展示方向设置不生效，可先检查是否使用了正确的 API（比如labelPlacement就仅在shape='circle' direction='hoz'时才生效。