Steps

A navigation bar that guides users through a task step by step.

When to Use

When a task is complex or involves a sequence of dependencies, break it down into a series of steps to simplify it.

Attribute	Description	Type	Default
`animation`	Whether to enable animation	`boolean`	`true`
`contentRender`	Custom rendering for content	`(item: StepsDataSource, index: number)=> ReactNode`	-
`current`	The current step	`number`	`1`
`dataSource`	Step data	StepsDataSource[]	`[ { "title": "step1", "content": "Open the refrigerator door" }, { "title": "step2", "content": "Put the elephant in the refrigerator" }, { "title": "step3", "content": "Close the refrigerator door" } ]`
`direction`	Display direction of the step bar	`'horizontal' \| 'vertical'`	`'horizontal'`
`labelPlacement`	Content layout	`'horizontal' \| 'vertical'`	`'vertical'`
`onClick`	Event triggered when a step is clicked	`(index: number) => void`	-
`readOnly`	Whether Read-only mode is enabled	`boolean`	`false`
`shape`	Display type of the step bar	`'circle' \| 'arrow' \| 'dot'`	`'circle'`