Ant Design

⌘ K

5.21.3

Steps

A navigation bar that guides users through the steps of a task.

가져오기import{ Steps }from"antd";

소스components/steps

문서

이 페이지 수정 변경 로그

Ant Design

⌘ K

5.21.3

Steps

A navigation bar that guides users through the steps of a task.

가져오기import{ Steps }from"antd";

소스components/steps

문서

이 페이지 수정 변경 로그

When To Use

When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.

Examples

API

Common props ref：Common props

Steps

The whole of the step bar.

Property	Description	Type	Default	Version
className	Additional class to Steps	string	-
current	To set the current step, counting from 0. You can overwrite this state by using `status` of `Step`	number	0
direction	To specify the direction of the step bar, `horizontal` or `vertical`	string	`horizontal`
initial	Set the initial step, counting from 0	number	0
labelPlacement	Place title and description with `horizontal` or `vertical` direction	string	`horizontal`
percent	Progress circle percentage of current step in `process` status (only works on basic Steps)	number	-	4.5.0
progressDot	Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical`	boolean \| (iconDot, {index, status, title, description}) => ReactNode	false
responsive	Change to vertical direction when screen width smaller than `532px`	boolean	true
size	To specify the size of the step bar, `default` and `small` are currently supported	string	`default`
status	To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error`	string	`process`
type	Type of steps, can be set to one of the following values: `default` `navigation` `inline`	string	`default`	inline: 5.0
onChange	Trigger when Step is changed	(current) => void	-
items	StepItem content	StepItem	[]	4.24.0

`type="inline"`

Property	Description	Type	Default	Version
className	Additional class to Steps	string	-
current	To set the current step, counting from 0. You can overwrite this state by using `status` of `Step`	number	0
initial	Set the initial step, counting from 0	number	0
status	To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error`	string	`process`
onChange	Trigger when Step is changed	(current) => void	-
items	StepItem content. not supported: `icon` `subtitle`	StepItem	[]	4.24.0

StepItem

A single step in the step bar.

Property	Description	Type	Default
description	Description of the step, optional property	ReactNode	-
disabled	Disable click	boolean	false
icon	Icon of the step, optional property	ReactNode	-
status	To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error`	string	`wait`
subTitle	Subtitle of the step	ReactNode	-
title	Title of the step	ReactNode	-

Design Token

컴포넌트 토큰어떻게 사용하나요?

토큰 이름	설명	타입	기본값
customIconFontSize	自定义图标大小	number	24
customIconSize	自定义图标容器尺寸	number	32
customIconTop	自定义图标 top	number	0
descriptionMaxWidth	描述区域最大宽度	number	140
dotCurrentSize	点状步骤点当前大小	number	10
dotSize	点状步骤点大小	number	8
iconFontSize	图标大小	number	14
iconSize	图标容器尺寸	number	32
iconSizeSM	小号步骤条图标大小	number	24
iconTop	图标 top	number	-0.5
navArrowColor	可跳转步骤条箭头颜色	string	rgba(0, 0, 0, 0.25)
navContentMaxWidth	可跳转步骤条内容最大宽度	undefined \| MaxWidth<string \| number>	auto
titleLineHeight	标题行高	string \| number	32

글로벌 토큰어떻게 사용하나요?

When To Use

When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.

Examples

API

Common props ref：Common props

Steps

The whole of the step bar.

Property	Description	Type	Default	Version
className	Additional class to Steps	string	-
current	To set the current step, counting from 0. You can overwrite this state by using `status` of `Step`	number	0
direction	To specify the direction of the step bar, `horizontal` or `vertical`	string	`horizontal`
initial	Set the initial step, counting from 0	number	0
labelPlacement	Place title and description with `horizontal` or `vertical` direction	string	`horizontal`
percent	Progress circle percentage of current step in `process` status (only works on basic Steps)	number	-	4.5.0
progressDot	Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical`	boolean \| (iconDot, {index, status, title, description}) => ReactNode	false
responsive	Change to vertical direction when screen width smaller than `532px`	boolean	true
size	To specify the size of the step bar, `default` and `small` are currently supported	string	`default`
status	To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error`	string	`process`
type	Type of steps, can be set to one of the following values: `default` `navigation` `inline`	string	`default`	inline: 5.0
onChange	Trigger when Step is changed	(current) => void	-
items	StepItem content	StepItem	[]	4.24.0

`type="inline"`

Property	Description	Type	Default	Version
className	Additional class to Steps	string	-
current	To set the current step, counting from 0. You can overwrite this state by using `status` of `Step`	number	0
initial	Set the initial step, counting from 0	number	0
status	To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error`	string	`process`
onChange	Trigger when Step is changed	(current) => void	-
items	StepItem content. not supported: `icon` `subtitle`	StepItem	[]	4.24.0

StepItem

A single step in the step bar.

Property	Description	Type	Default
description	Description of the step, optional property	ReactNode	-
disabled	Disable click	boolean	false
icon	Icon of the step, optional property	ReactNode	-
status	To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error`	string	`wait`
subTitle	Subtitle of the step	ReactNode	-
title	Title of the step	ReactNode	-

Design Token

컴포넌트 토큰어떻게 사용하나요?

토큰 이름	설명	타입	기본값
customIconFontSize	自定义图标大小	number	24
customIconSize	自定义图标容器尺寸	number	32
customIconTop	自定义图标 top	number	0
descriptionMaxWidth	描述区域最大宽度	number	140
dotCurrentSize	点状步骤点当前大小	number	10
dotSize	点状步骤点大小	number	8
iconFontSize	图标大小	number	14
iconSize	图标容器尺寸	number	32
iconSizeSM	小号步骤条图标大小	number	24
iconTop	图标 top	number	-0.5
navArrowColor	可跳转步骤条箭头颜色	string	rgba(0, 0, 0, 0.25)
navContentMaxWidth	可跳转步骤条内容最大宽度	undefined \| MaxWidth<string \| number>	auto
titleLineHeight	标题行高	string \| number	32

글로벌 토큰어떻게 사용하나요?

Vertical mini version

Vertical mini version

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

Finished

2

In Progress

3

Waiting

Login

Verification

Pay

Done

1

First

2

Second

3

Last

First-content

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description

In Process

This is a description

3

Waiting

This is a description

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

Finished

This is a description. This is a description.

Finished

This is a description. This is a description.

In Progress

This is a description. This is a description.

Waiting

This is a description.

Waiting

This is a description.

Finished

You can hover on the dot.

In Progress

You can hover on the dot.

Waiting

You can hover on the dot.

Waiting

You can hover on the dot.

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

Finished

This is a description. This is a description.

Finished

This is a description. This is a description.

In Progress

This is a description. This is a description.

Waiting

This is a description.

Waiting

This is a description.

1

Step 1

This is a description.

2

Step 2

This is a description.

3

Step 3

This is a description.

1

Step 1

This is a description.

2

Step 2

This is a description.

3

Step 3

This is a description.

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

SmallDefault

1

Finished

1

Finished

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

2

In Progress

This is a description.

3

Waiting

This is a description.

Ant Design Title 1
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
Ant Design Title 2
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
Ant Design Title 3
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.
Ant Design Title 4
Ant Design, a design language for background applications, is refined by Ant UED Team
Step 1
This is a Step 1.
Step 2
This is a Step 2.
Step 3
This is a Step 3.

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

Finished

This is a description.

2

In Progress

Left 00:00:08

This is a description.

3

Waiting

This is a description.

Login

Verification

Pay

Done

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

Steps

Steps

When To Use

Examples

API

Steps

type="inline"

StepItem

Design Token

컴포넌트 토큰어떻게 사용하나요?

글로벌 토큰어떻게 사용하나요?

When To Use

Examples

API

Steps

type="inline"

StepItem

Design Token

컴포넌트 토큰어떻게 사용하나요?

글로벌 토큰어떻게 사용하나요?

Ant Design Title 1

Ant Design Title 2

Ant Design Title 3

Ant Design Title 4

`type="inline"`

`type="inline"`