Steps

Configuration example

Explanation: When the status in form is pendingApproval, the current step is 1, and the title in stepItems will be displayed as "first-level approval"

{
  "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": "Model"
      },
      {
        "title": "First-level approval"
      },
      {
        "title": "Second level approval"
      },
      {
        "title": "release"
      }
    ]
  }
}

Container properties

All component configurations support Container properties at the first level.

Component properties

Name	Type	Default	Supports Variable Pattern	Description
className	string		✔️	The className of the component
style	object			The style of the component
current	number			The number of the current step, the step starts from 0
status	'wait' | 'process' | 'finish' | 'error'			Current step status
direction	'horizontal' | 'vertical'	'horizontal'		direction
labelPlacement	'horizontal' | 'vertical'	'vertical'		The location of Step title and description
items	Array<ItemProps>			properties of antd steps
valueMap	object			Map value to step number

All the remaining componentsProps will be passed to the component root element div).

ItemProps

Name	Type	Default	Description
title	string		Title of the steps
description	string		Description of steps
icon	string		Steps icon
hidden	ConditionalPropertyPropType(bool)	false

JS API

The interface obtained through formApi.getFieldApi() is as follows:

Name	Type	Description
node	HTML Element	The root DOM element of the component