ant-design/components/steps/index.zh-CN.md

category	subtitle	group	title	cover
Components	步骤条	导航	Steps	https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg

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

何时使用

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

4.24.0 用法升级

// >=4.24.0 可用，推荐的写法 ✅
const items = [{ title: '第一步' }, { title: '第二步' }, { title: '第三步' }];
return <Steps items={items} />;

// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻‍♀️
<Steps>
  <Step title="第一步" />
  <Step title="第二步" />
  <Step title="第三步" />
</Steps>;

代码演示

基本用法 (废弃的语法糖) 基本用法 迷你版 带图标的步骤条 步骤切换 竖直方向的步骤条 竖直方向的小型步骤条 步骤运行错误 点状步骤条 自定义点状步骤条 迷你版点状步骤条 可点击 导航步骤 带有进度的步骤 标签放置位置 Progress Debug Steps 嵌套 Steps 内联步骤

API

Steps

整体步骤条。

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

type="inline"

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

StepItem

步骤条内的每一个步骤。

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