总览

Step 步骤

通过按序列分解某个任务流程为多个步骤，并引导用户按流程完成任务。

Step 步骤

Circle

  1. Step 1
    Open the refrigerator door
  2. 2
    Step 2
    Put the elephant in the refrigerator
  3. 3
    Step 3
    Close the refrigerator door

Circle(Horizontal content)

  1. Step 1
    Open the refrigerator door
  2. 2
    Step 2
    Put the elephant in the refrigerator
  3. 3
    Step 3
    Close the refrigerator door

Dot

  1. Step 1
    Open the refrigerator door
  2. Step 2
    Put the elephant in the refrigerator
  3. Step 3
    Close the refrigerator door

基本

在最简单的情况下，Step 有三种类型，可以通过 shape 属性进行切换。

  1. Step 1
    Open the refrigerator door
  2. 2
    Step 2
    Put the elephant in the refrigerator
  3. 3
    Step 3
    Close the refrigerator door


  1. Step 1
    Open the refrigerator door
  2. Step 2
    Put the elephant in the refrigerator
  3. Step 3
    Close the refrigerator door

垂直模式

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

  1. Step 1
    Open the refrigerator door
  2. Step 2
    Put the elephant in the refrigerator
  3. Step 3
    Close the refrigerator door


  1. Step 1
    Open the refrigerator door
  2. 40%
    Step 2
    Put the elephant in the refrigerator
  3. Step 3
    Close the refrigerator door

图标和百分比

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

  1. Step 1
  2. Step 2
  3. Step 3
  4. Step 4


  1. Step 1
  2. 2
    Step 2
  3. 3
    Step 3
  4. 4
    Step 4

禁用步骤项

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

  1. 一
  2. 二
  3. 3
    三
  4. 4
    四

Step.Item 自定义渲染

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

  1. Step 1
  2. Step 2
  3. Step 3
  4. 4
    Step 4
  5. 5
    Step 5
  6. 6
    Step 6


只读模式

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

  1. Step 1
    Description
  2. Step 2
    Description
  3. Step 3
    Description
  4. 4
    Step 4
    Description
  5. 5
    Step 5
    Description
  6. 6
    Step 6
    Description


受控模式

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

API

Step

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

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

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

可选值:
'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内容，用于垂直状态下的内容填充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() => {}