Step 步骤

用来告知用户当前业务流程的进程,属于流程可视化的一种辅助的方式,通过 Step ,用户可以清晰地知道自己现在处于哪个进程。

基本用法

在最简单的情况下,Step 有三种类型,可以通过 shape 属性进行切换。 可以通过 animation 属性关闭步骤条的动画,使 Step 变为纯展示型。

Loading demo...

APIs

Step

参数说明类型默认值
current当前步骤Number0
shape类型

可选值:
'circle', 'arrow', 'dot'
Enum'circle'
direction展示方向

可选值:
'hoz', 'ver'
Enum'hoz'
labelPlacement横向布局时( direction 为 hoz )的内容排列

可选值:
'hoz', 'ver'
Enum'ver'
readOnly是否只读模式Boolean-
animation是否开启动效Booleantrue
itemRenderStepItem 的自定义渲染

签名:
Function(index: Number, status: String) => Node
参数:
index: {Number} 节点索引
status: {String} 节点状态
返回值:
{Node} 节点的渲染结果
Functionnull

Step.Item

参数说明类型默认值
status步骤的状态,如不传,会根据外层的 Step 的 current 属性生成,可选值为 wait, process, finish

可选值:
'wait', 'process', 'finish'
Enum-
title标题ReactNode-
icon图标String-
content内容填充, shape为 arrow 时无效ReactNode-
itemRenderStepItem 的自定义渲染, 会覆盖父节点设置的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() => {}

Demo

垂直模式

垂直模式可以添加 content 的内容,对于点型和圆圈型的 Step 组件而言,可以通过设置 direction 属性设置其展示方向为垂直。 箭头形不支持垂直模式。

Loading demo...

图标和百分比

可以在点型和圆形步骤条中使用图标,圆形步骤条还可以使用百分比。

Loading demo...

禁止步骤项

可以通过在 Step.Item 上设置 disabled 属性来禁用某个步骤。

Loading demo...

Step 自定义渲染

Step.Item 默认有三种状态,分别是 wait, process, finish。 用户可以通过传递 Step 组件的 itemRender 属性进行自定义的渲染其样式。

Loading demo...

只读模式

只读模式,不可触发回调。

Loading demo...

Loading demo...

受控模式

默认情况下,Step 定义为展示型组件,上层组件可以通过修改传入的 current 属性值来修改当前的步骤,同时可以设置每个节点的 click 事件,来自定义回调。

Loading demo...