在最简单的情况下,Step 有三种类型,可以通过 shape
属性进行切换。
在最简单的情况下,Step 有三种类型,可以通过 shape
属性进行切换。
对于点型和圆圈型的 Step 组件而言,可以通过设置 direction
属性设置其展示方向为垂直。
箭头形不支持垂直模式。
可以在点型和圆形步骤条中使用图标,圆形步骤条还支持使用百分比。
可以通过在 Step.Item
上设置 disabled
属性来禁用某个步骤。
Step.Item
默认有三种状态,分别是 wait
, process
, finish
。
用户可以通过传递 itemRender
属性进行自定义的渲染。
只读模式,不可触发回调。
默认情况下,Step 定义为展示型组件,上层组件可以通过修改传入的 current 属性值来修改当前的步骤,同时可以设置每个节点的 click 事件,来自定义回调。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
current | 当前步骤 | Number | 0 |
shape | 类型 可选值: 'circle', 'arrow', 'dot' | Enum | 'circle' |
direction | 展示方向 可选值: 'hoz', 'ver' | Enum | 'hoz' |
labelPlacement | 横向布局时的内容排列 可选值: 'hoz', 'ver' | Enum | 'ver' |
readOnly | 是否只读模式 | Boolean | - |
animation | 是否开启动效 | Boolean | true |
itemRender | StepItem 的自定义渲染 签名: Function(index: Number, status: String) => Node 参数: index: {Number} 节点索引 status: {String} 节点状态 返回值: {Node} 节点的渲染结果 | Function | null |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
status | 步骤的状态,如不传,会根据外层的 Step 的 current 属性生成,可选值为 wait , process , finish 可选值: 'wait', 'process', 'finish' | Enum | - |
title | 标题 | ReactNode | - |
icon | 图标 | String | - |
content | 内容,用于垂直状态下的内容填充 | ReactNode | - |
itemRender | StepItem 的自定义渲染, 会覆盖父节点设置的itemRender 签名: Function(index: Number, status: String) => Node 参数: index: {Number} 节点索引 status: {String} 节点状态 返回值: {Node} 节点的渲染结果 | Function | - |
percent | 百分比 | Number | - |
disabled | 是否禁用 | Boolean | - |
onClick | 点击步骤时的回调 签名: Function(index: Number) => void 参数: index: {Number} 节点索引 | Function | () => {} |