Steps

配置示例

解释说明：当form里的status为pendingApproval时，当前步骤为1，会取stepItems里title为"一级审批"进行显示

{
  "component": "Steps",
  "valueField": "status",
  "style": {
    "marginBottom": "80px"
  },
  "componentProps": {
    "progressDot": false,
    "size": "small",
    "valueMap": {
      "pendingApproval": 1,
      "firstPass": 2,
      "firstReject": 1,
      "secondReject": 2,
      "secondPass": 3
    },
    "stepItems": [
      {
        "title": "模型"
      },
      {
        "title": "一级审批"
      },
      {
        "title": "二级审批"
      },
      {
        "title": "发布"
      }
    ]
  }
}

容器属性

所有组件配置的第一层均支持容器属性

组件属性 componentsProps

Name	Type	Default	是否支持 Variable Pattern	Description
className	string		✔️	组件的 className
style	object			组件的 style
current	number			当前步骤的编号，步骤从 0 开始编号
status	'wait' | 'process' | 'finish' | 'error'			当前步骤的状态
direction	'horizontal' | 'vertical'	'horizontal'		方向
labelPlacement	'horizontal' | 'vertical'	'vertical'		Step title 和 description 的位置
items	Array<ItemProps>			antd steps 的属性
valueMap	object			将 value 映射到 step 编号

所有其余 componentsProps 将会被传给组件根元素 div）。

ItemProps

Name	Type	Default	Description
title	string		步骤的标题
description	string		步骤的描述
icon	string		步骤的图标
hidden	ConditionalPropertyPropType(bool)	false

JS API

通过 formApi.getFieldApi() 获取的接口如下：

Name	Type	Description
node	HTML Element	组件的根 DOM 元素