## Steps 步骤条
### 使用指南
``` javascript
import { Step, Steps } from 'vant';
Vue.component(Step.name, Step);
Vue.component(Steps.name, Steps);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
买家下单
商家接单
买家提货
交易完成
下一步
```
:::
#### 物流描述
通过`title`和`description`属性来定义物流描述信息
:::demo 物流描述
```html
买家下单
商家接单
买家提货
交易完成
```
:::
#### 竖向步骤条
可以通过设置`direction`属性来改变步骤条的显示方式
:::demo 竖向步骤条
```html
【城市】物流状态1
2016-07-12 12:40
【城市】物流状态2
2016-07-11 10:00
快件已发货
2016-07-10 09:30
```
:::
### 高级用法
使用`slot`增加自定义内容
:::demo 高级用法
```html
物流进度
买家下单
商家接单
买家提货
交易完成
```
:::
### Steps API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| active | 当前步骤，起始值为0 | `Number` | | |
| icon | 当前步骤的icon | `String` | | |
| iconClass | 当前步骤栏为icon添加的类 | `String` | | |
| title | 当前步骤从标题 | `String` | | |
| description | 当前步骤描述 | `String` | | |
| direction | 显示方向 | `String` | `horizontal` | `vertical` |
| activeColor | active状态颜色 | `String` | `#06bf04` | |
### Steps Slot
| 名称 | 说明 |
|-----------|-----------|
| icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 |