用来告知用户当前业务流程的进程,属于流程可视化的一种辅助的方式,通过 Step ,用户可以清晰地知道自己现在处于哪个进程。
在最简单的情况下,Step 有三种类型,可以通过 shape 属性进行切换。 可以通过 animation 属性关闭步骤条的动画,使 Step 变为纯展示型。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
current | 当前步骤 | Number | 0 |
shape | 类型 可选值: 'circle', 'arrow', 'dot' | Enum | 'circle' |
direction | 展示方向 可选值: 'hoz', 'ver' | Enum | 'hoz' |
labelPlacement | 横向布局时( direction 为 hoz )的内容排列 可选值: '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 | 内容填充, shape为 arrow 时无效 | 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 | () => {} |
垂直模式可以添加 content 的内容,对于点型和圆圈型的 Step 组件而言,可以通过设置 direction 属性设置其展示方向为垂直。 箭头形不支持垂直模式。
可以在点型和圆形步骤条中使用图标,圆形步骤条还可以使用百分比。
可以通过在 Step.Item 上设置 disabled 属性来禁用某个步骤。
Step.Item 默认有三种状态,分别是 wait, process, finish。 用户可以通过传递 Step 组件的 itemRender 属性进行自定义的渲染其样式。
只读模式,不可触发回调。
默认情况下,Step 定义为展示型组件,上层组件可以通过修改传入的 current 属性值来修改当前的步骤,同时可以设置每个节点的 click 事件,来自定义回调。