---
title: Steps - 步骤条
order: 2
path: /steps
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 5
  title: 导航
  path: /nav
---

用于反馈一系列操作任务的处理结果，当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。

## 基础步骤条

适用于步骤数较多时，让用户更明确的了解步骤数量，分为简单和带描述两种样式

<code src="./demos/base.tsx" />

## 小型步骤条

在基础步骤条的基础上，缩小尺寸，适用于一些容器模块中的场景

<code src="./demos/small.tsx" />

## 点状步骤条

适用于步骤数较少时，主要引导用户按步骤完成操作

<code src="./demos/spot.tsx" />

## 箭头步骤条

适用于一些步骤状态区分明显的场景，主要让用户了解当前的步骤状态

### 正常尺寸

<code src="./demos/arrowNormal.tsx" />

### 迷你尺寸

<code src="./demos/arrowMini.tsx" />

## 竖直步骤条

垂直方向排列的步骤条，常用于竖排布局或窄屏场景，提供了基础和点状两种样式

<code src="./demos/vertical.tsx" />

## 自定义图标步骤条

适用于需要自定义图标的场景

<code src="./demos/defineIcon.tsx" />

## 步骤错误

当步骤出现错误状态时，需要出现报错提示

<code src="./demos/error.tsx" />

## 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` 两种                                 | string                                                                 | `default`    |  |
| onChange       | 点击切换步骤时触发                                                            | (current) => void                                                      | -            |  |

### Steps.Step

步骤条内的每一个步骤。

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