# Steps 步骤条
### 介绍
拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。
### 安装
```javascript
import { createApp } from 'vue';
//vue
import { Steps, Step } from '@nutui/nutui';
//taro
import { Steps, Step } from '@nutui/nutui-taro';
const app = createApp();
app.use(Steps);
app.use(Step);
```
## 代码演示
### 基本用法
```html
1
2
3
4
```
### 标题和描述信息
```html
1
2
3
```
### 自定义图标
```html
1
2
3
```
### 竖向步骤条
```html
1
2
3
```
### 点状步骤和垂直方向
```html
1
2
3
```
## API
### Props
#### nut-steps
| 参数 | 说明 | 类型 | 默认值 |
| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
| direction | 显示方向，`horizontal`,`vertical` | String | 'horizontal' |
| current | 当前所在的步骤 | Number、String | '0' |
| progress-dot | 点状步骤条 | Boolean | false |
#### nut-step
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ---------------------- | ------------ | ----------- |
| title | 流程步骤的标题 | String | 步骤 |
| content | 流程步骤的描述性文字(支持 html 结构) | String | 步骤描述 |
| icon | 图标 | String | null |
| icon-color | 图标颜色 | String | null |