---
localeCode: zh-CN
order: 38
category: 导航类
title: Steps 步骤
icon: doc-steps
dir: column
brief: 当一个长流程需要分步时,使用步骤组件来让用户知道其当前的进度
---
## 何时使用
当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务。
## 代码演示
### 如何引入
```jsx import
import { Steps } from '@douyinfe/semi-ui';
const Step = Steps.Step;
```
### 默认步骤条(旧版)
建议使用简易版 steps(新版),旧版后续会逐渐 deprecate
```jsx live=true dir="column"
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
)
```
### 简单步骤条(新版)
通过设置 type="basic" 显示为简洁风格步骤条
```jsx live=true dir="column"
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
)
```
### 导航步骤条
通过设置 type="nav" 显示为导航风格步骤条。导航风格的步骤条有以下特点:
1. 步骤条不支持交互。
2. 适用于步骤间互相关联较小,内容互不影响,且需要突出页面视觉元素时使用。
3. 步骤条的宽度按照内容物撑开。
4. Steps.Step 仅支持title、className、style 属性。
```jsx live=true dir="column"
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
)
```
### 迷你尺寸步骤条
通过设置 size="small" 显示迷你尺寸步骤条
```jsx live=true dir="column"
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
)
```
```jsx live=true dir="column"
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
)
```
### 处理进度
配合内容及按钮使用,表示一个流程的处理进度
```jsx live=true dir="column"
import React from 'react';
import { Steps, Button } from '@douyinfe/semi-ui';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
};
}
next() {
const current = this.state.current + 1;
this.setState({ current });
}
prev() {
const current = this.state.current - 1;
this.setState({ current });
}
render() {
const { current } = this.state;
const { Step } = Steps;
const steps = [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
];
return (
{steps.map(item => (
))}
{steps[current].content}
{current < steps.length - 1 && (
)}
{current === steps.length - 1 && (
)}
{current > 0 && (
)}
);
}
}
```
### 竖直方向的步骤条
通过设置 `direction`,使用竖直方向的步骤条
```jsx live=true dir="column"
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
)
```
```jsx live=true dir="column"
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
)
```
### 指定步骤状态
步骤运行错误,使用 Steps 的 `status` 属性来指定当前步骤的状态。
```jsx live=true dir="column"
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
)
```
### 自定义图标/状态
通过设置 Steps.Step 的 `icon` 属性,可以启用自定义图标
通过设置 Steps.Step 的 `status` 属性,可以自定义每个 step 的状态
```jsx live=true dir="column"
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
import { IconHome, IconLock } from '@douyinfe/semi-icons';
() => (
} />
} />
)
```
### onChange 回调
从 1.29.0 版本开始支持 onChange,可以使用它来实现处理进度。onChange 接收一个 number 类型的参数,该参数等于 initial + current。
```jsx live=true dir="column" hideInDSM
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 1,
};
}
onChange(index) {
this.setState({ current: index });
}
render() {
const { current } = this.state;
const { Step } = Steps;
const steps = [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
];
return (
this.onChange(index)}>
{steps.map(item => (
))}
);
}
}
```
## API 参考
### Steps
整体步骤条。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ----------------------------------------------------------------------------- | ------ | ---------- | ------ |
| className | 类名 | string | | |
| current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 `status` 属性覆盖状态 | number | 0 | |
| direction | 指定步骤条方向。目前支持水平(`horizontal`)和竖直(`vertical`)两种方向 | string | horizontal | |
| hasLine | 步骤条类型为basic时,可控制是否显示连接线 | boolean | true | 1.18.0 |
| initial | 起始序号,从 0 开始记数 | number | 0 | |
| status | 指定当前步骤的状态,可选 `wait`、`process`、`finish`、`error`、`warning` | string | process | |
| size | 对于简单步骤条和导航步骤条,可选尺寸尺寸,值为`small`、`default` | string | `default` | 1.18.0 |
| style | 样式 | CSSProperties | | |
| type | 步骤条类型,可选 `fill`、`basic`、`nav` | string | fill | 1.18.0 |
| onChange | 改变步骤条的回调 | (index: number) => void | - | 1.29.0 |
### Steps.Step
步骤条内的每一个步骤。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------------------------------------------------------------------------------------------------- | ----------------- | ------ | ---- |
| className | 类名 | string | | |
| description | 步骤的详情描述,可选 | ReactNode | - | |
| icon | 步骤图标的类型,可选 | ReactNode | - | |
| status | 指定状态。当不配置该属性时,会使用 Steps 的 `current` 来自动指定状态。可选:`wait`、`process`、`finish`、`error`、`warning` | string | wait | |
| style | 样式 | CSSProperties | | |
| title | 标题 | ReactNode | - | |
| onClick | 点击回调 | function | - | |
## 设计变量