Steps

Navigation bar that guides users to complete tasks according to the process.

When to use

• When tasks are complex or have sequential relationships, decompose them into a series of steps to simplify the task.

Component Example

Component Properties

属性	说明	类型	默认值
animation	Whether to enable animation	boolean	true
contentRender	Content custom rendering	(item: StepsDataSource, index: number)=> ReactNode	-
current	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	Step bar display direction	'horizontal' | 'vertical'	'horizontal'
labelPlacement	Content arrangement method	'horizontal' | 'vertical'	'vertical'
onClick	Event triggered when clicking step	(index: number) => void	-
readOnly	Whether read-only mode	boolean	false
shape	Step bar display type	'circle' | 'arrow' | 'dot'	'circle'