Steps
步骤条

引导用户按照流程完成任务的导航条。
使用import{ Steps }from"antd";

何时使用

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

代码演示

Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.

简单的步骤条。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Finished
2
In Progress
3
Waiting

迷你版的步骤条,通过设置 <Steps size="small"> 启用.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Login
Verification
Pay
Done

通过设置 itemsicon 属性,可以启用自定义图标。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
1
First
2
Second
3
Last
First-content

通常配合内容及按钮使用,表示一个流程的处理进度。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Finished
This is a description
In Process
This is a description
3
Waiting
This is a description

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.

包含步骤点的进度条。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.

为点状步骤条增加自定义展示。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

导航类型的步骤条。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Finished
This is a description.
2
In Progress
Left 00:00:08
This is a description.
3
Waiting
This is a description.

带有进度的步骤。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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.

修改标签放置位置为 vertical

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • 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.

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Steps

整体步骤条。

参数说明类型默认值版本
className步骤条类名string-
current指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 status 属性覆盖状态number0
direction指定步骤条方向。目前支持水平(horizontal)和竖直(vertical)两种方向stringhorizontal
initial起始序号,从 0 开始记数number0
labelPlacement指定标签放置位置,默认水平放图标右侧,可选 vertical 放图标下方stringhorizontal
percent当前 process 步骤显示的进度条进度(只对基本类型的 Steps 生效)number-4.5.0
progressDot点状步骤条,可以设置为一个 function,labelPlacement 将强制为 verticalboolean | (iconDot, {index, status, title, description}) => ReactNodefalse
responsive当屏幕宽度小于 532px 时自动变为垂直模式booleantrue
size指定大小,目前支持普通(default)和迷你(smallstringdefault
status指定当前步骤的状态,可选 wait process finish errorstringprocess
type步骤条类型,可选 default navigation inlinestringdefaultinline: 5.0
onChange点击切换步骤时触发(current) => void-
items配置选项卡内容StepItem[]4.24.0

type="inline"

参数说明类型默认值版本
className步骤条类名string-
current指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 status 属性覆盖状态number0
initial起始序号,从 0 开始记数number0
status指定当前步骤的状态,可选 wait process finish errorstringprocess
onChange点击切换步骤时触发(current) => void-
items配置选项卡内容,不支持 icon subtitleStepItem[]4.24.0

StepItem

步骤条内的每一个步骤。

参数说明类型默认值版本
description步骤的详情描述,可选ReactNode-
disabled禁用点击booleanfalse
icon步骤图标的类型,可选ReactNode-
status指定状态。当不配置该属性时,会使用 Steps 的 current 来自动指定状态。可选:wait process finish errorstringwait
subTitle子标题ReactNode-
title标题ReactNode-

主题变量(Design Token)

组件 Token如何定制?

Token 名称描述类型默认值
customIconFontSize自定义图标大小number24
customIconSize自定义图标容器尺寸number32
customIconTop自定义图标 topnumber0
descriptionMaxWidth描述区域最大宽度number140
dotCurrentSize点状步骤点当前大小number10
dotSize点状步骤点大小number8
iconFontSize图标大小number14
iconSize图标容器尺寸number32
iconSizeSM小号步骤条图标大小number24
iconTop图标 topnumber-0.5
navArrowColor可跳转步骤条箭头颜色stringrgba(0,0,0,0.25)
navContentMaxWidth可跳转步骤条内容最大宽度undefined | MaxWidth<string | number>auto
titleLineHeight标题行高string | number32

全局 Token如何定制?