Steps
步骤条

引导用户按照流程完成任务的导航条。

使用import { Steps } from "antd";

源码components/steps

文档

编辑此页更新日志

何时使用

当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

代码演示

Finished

This is a content.

In Progress

Left 00:00:08

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

Left 00:00:08

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

Left 00:00:08

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

Left 00:00:08

This is a content.

Waiting

This is a content.

基本用法

简单的步骤条，使用 variant 属性来设置不同的样式，使用 size 控制大小。

Finished

This is a content

In Process

This is a content

Waiting

This is a content

步骤运行错误

使用 Steps 的 status 属性来指定当前步骤的状态。

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

竖直方向的步骤条

简单的竖直方向的步骤条。

Step 1

This is a content.

Step 2

This is a content.

Step 3

This is a content.

Step 1

This is a content.

Step 2

This is a content.

Step 3

This is a content.

可点击

设置 onChange 后，Steps 变为可点击状态。

Step 1

00:00

This is a content.

Step 2

This is a content.

Step 3

This is a content.

Step 1

00:00

This is a content.

Step 2

This is a content.

Step 3

This is a content.

面板式步骤

面板类型的步骤条。

Verification

Pay

Done

带图标的步骤条

通过设置 items 的 icon 属性，可以启用自定义图标。

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

标签放置位置与进度

使用 titlePlacement 设置标签位置，通过 percent 显示进度。

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

Finished

This is a content.

In Progress

This is a content.

Waiting

This is a content.

点状步骤条

包含步骤点的进度条。

导航步骤

导航类型的步骤条。

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

内联步骤

内联类型的步骤条，适用于列表内容场景中展示对象所在流程、当前状态的情况。

Step 1

Sub Title

This is Step 1

Step 2

Sub Title

This is Step 2

Step 3

Sub Title

This is Step 3

Step 4

Sub Title

This is Step 4

Step 5

Sub Title

This is Step 5

Step 1

Sub Title

This is Step 1

Step 2

Sub Title

This is Step 2

Step 3

Sub Title

This is Step 3

Step 4

Sub Title

This is Step 4

Step 5

Sub Title

This is Step 5

Step 3

Sub Title

This is Step 3

Step 4

Sub Title

This is Step 4

Step 5

Sub Title

This is Step 5

内联样式组合

内联步骤条修改样式，通过 offset 进行对齐。

API

通用属性参考：通用属性

Steps

整体步骤条。

参数	说明	类型	默认值	版本
classNames	语义化结构 className	Record<SemanticDOM, string>	-
current	指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态	number	0
~~direction~~	指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向	string	`horizontal`
iconRender	自定义渲染图标，请优先使用 `items.icon`	(oriNode, info: { index, active, item }) => ReactNode	-
initial	起始序号，从 0 开始记数	number	0
~~labelPlacement~~	指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方	string	`horizontal`
orientation	指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向	string	`horizontal`
percent	当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效）	number	-	4.5.0
progressDot	点状步骤条，可以设置为一个 function，`titlePlacement` 将强制为 `vertical`	boolean \| (iconDot, { index, status, title, content }) => ReactNode	false
responsive	当屏幕宽度小于 `532px` 时自动变为垂直模式	boolean	true
size	指定大小，目前支持普通（`default`）和迷你（`small`）	string	`default`
status	指定当前步骤的状态，可选 `wait` `process` `finish` `error`	string	`process`
styles	语义化结构 style	Record<SemanticDOM, CSSProperties>	-
titlePlacement	指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方	string	`horizontal`
type	步骤条类型，可选 `default` `dot` `inline` `navigation` `panel`	string	`default`
variant	设置样式变体	`filled` \| `outlined`	`filled`
onChange	点击切换步骤时触发	(current) => void	-
items	配置选项卡内容	StepItem	[]	4.24.0

StepItem

步骤条内的每一个步骤。

参数	说明	类型	默认值
content	步骤的详情描述，可选	ReactNode	-
~~description~~	步骤的详情描述，可选	ReactNode	-
disabled	禁用点击	boolean	false
icon	步骤图标的类型，可选	ReactNode	-
status	指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error`	string	`wait`
subTitle	子标题	ReactNode	-
title	标题	ReactNode	-

Semantic DOM

Steps

Step 1

00:00

This is a content.

Step 2

00:01

This is a content.

Step 3

00:02

This is a content.

Step 1

00:00

This is a content.

Step 2

00:01

This is a content.

Step 3

00:02

This is a content.

root
根元素
item
步骤项元素
itemWrapper
步骤项内裹元素
itemIcon
步骤项图标元素
itemHeader
步骤项头部元素
itemTitle
步骤项标题元素
itemSubtitle
步骤项副标题元素
itemSection
步骤项区域元素
itemContent
步骤项内容元素
itemRail
步骤项连接线元素

StepItem

Step 1

00:00

This is a content.

Step 2

00:01

This is a content.

Step 3

00:02

This is a content.

Step 1

00:00

This is a content.

Step 2

00:01

This is a content.

Step 3

00:02

This is a content.

root
根元素
wrapper
步骤项内裹元素
icon
步骤项图标元素
header
步骤项头部元素
title
步骤项标题元素
subtitle
步骤项副标题元素
section
步骤项区域元素
content
步骤项内容元素
rail
步骤项连接线元素

主题变量（Design Token）

组件 Token如何定制？

Token 名称	描述	类型	默认值
customIconFontSize	自定义图标大小	number	24
customIconSize	自定义图标容器尺寸	number	32
customIconTop	自定义图标 top	number	0
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>	unset

全局 Token如何定制？

文档贡献者

API

通用属性参考：通用属性

Steps

整体步骤条。

参数	说明	类型	默认值	版本
classNames	语义化结构 className	Record<SemanticDOM, string>	-
current	指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态	number	0
~~direction~~	指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向	string	`horizontal`
iconRender	自定义渲染图标，请优先使用 `items.icon`	(oriNode, info: { index, active, item }) => ReactNode	-
initial	起始序号，从 0 开始记数	number	0
~~labelPlacement~~	指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方	string	`horizontal`
orientation	指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向	string	`horizontal`
percent	当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效）	number	-	4.5.0
progressDot	点状步骤条，可以设置为一个 function，`titlePlacement` 将强制为 `vertical`	boolean \| (iconDot, { index, status, title, content }) => ReactNode	false
responsive	当屏幕宽度小于 `532px` 时自动变为垂直模式	boolean	true
size	指定大小，目前支持普通（`default`）和迷你（`small`）	string	`default`
status	指定当前步骤的状态，可选 `wait` `process` `finish` `error`	string	`process`
styles	语义化结构 style	Record<SemanticDOM, CSSProperties>	-
titlePlacement	指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方	string	`horizontal`
type	步骤条类型，可选 `default` `dot` `inline` `navigation` `panel`	string	`default`
variant	设置样式变体	`filled` \| `outlined`	`filled`
onChange	点击切换步骤时触发	(current) => void	-
items	配置选项卡内容	StepItem	[]	4.24.0

StepItem

步骤条内的每一个步骤。

参数	说明	类型	默认值
content	步骤的详情描述，可选	ReactNode	-
~~description~~	步骤的详情描述，可选	ReactNode	-
disabled	禁用点击	boolean	false
icon	步骤图标的类型，可选	ReactNode	-
status	指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error`	string	`wait`
subTitle	子标题	ReactNode	-
title	标题	ReactNode	-

Token 名称

描述

类型

默认值

customIconFontSize

自定义图标大小

number

customIconSize

自定义图标容器尺寸

number

customIconTop

自定义图标 top

number

dotCurrentSize

点状步骤点当前大小

number

dotSize

点状步骤点大小

number

iconFontSize

图标大小

number

iconSize

图标容器尺寸

number

iconSizeSM

小号步骤条图标大小

number

iconTop

图标 top

number

-0.5

navArrowColor

可跳转步骤条箭头颜色

string

rgba(0,0,0,0.25)

navContentMaxWidth

可跳转步骤条内容最大宽度

undefined | MaxWidth<string | number>

unset

Steps步骤条

Steps步骤条

何时使用

代码演示

API

Steps

StepItem

Semantic DOM

Steps

root

item

itemWrapper

itemIcon

itemHeader

itemTitle

itemSubtitle

itemSection

itemContent

itemRail

StepItem

root

wrapper

icon

header

title

subtitle

section

content

rail

主题变量（Design Token）

何时使用

代码演示

API

Steps

StepItem

Semantic DOM

Steps

root

item

itemWrapper

itemIcon

itemHeader

itemTitle

itemSubtitle

itemSection

itemContent

itemRail

StepItem

root

wrapper

icon

header

title

subtitle

section

content

rail

主题变量（Design Token）

Steps
步骤条

Steps
步骤条