## Steps 步骤条
### 使用指南
``` javascript
import { Step, Steps } from 'vant';
Vue.component(Step.name, Step);
Vue.component(Steps.name, Steps);
```
### 代码演示
#### 基础用法
:::demo 基础用法
```html
买家下单
商家接单
买家提货
交易完成
下一步
```
:::
#### 只显示步骤条
当你不设置`title`或`description`属性时，就会只显示步骤条，而没有步骤的详细信息。
:::demo 只显示步骤条
```html
买家下单
商家接单
买家提货
交易完成
```
:::
#### 竖式步骤条
可以通过设置`direction`属性来改变步骤条的显示方式，可选值有`vertical/horizontal`。
:::demo 只显示步骤条
```html
【城市】最新的物流状态之类的表述哈哈哈哈
2016-07-12 12:12:12
【城市】已经过了的物流状态我是折行我是折行我是折行联系电话：158630099999
2016-07-12 12:12:12
未发货
2016-07-12 12:12:12
```
:::
### 高级用法
可以使用具名`slot`增加自定义内容，其中包含`icon`和`message-extra`。
:::demo 高级用法
```html
流程
买家下单
商家接单
买家提货
交易完成
```
:::
### Steps API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| active | 当前激活的步骤，从0开始 | `number` | | |
| icon | 当前步骤的icon | `string` | | |
| iconClass | 当前步骤栏为icon添加的类 | `string` | | |
| title | 当前步骤从标题 | `string` | | |
| description | 当前步骤描述 | `string` | | |
| direction | 显示方向 | `string` | `horizontal` | `vertical/horizontal` |
| activeColor | `active`状态时的颜色 | `string` | `#06bf04` | |
### Steps Slot
| 名称 | 说明 |
|-----------|-----------|
| icon | 自定义icon区域 |
| message-extra | 状态栏添加额外的元素 |