## Steps
### Install
``` javascript
import { Step, Steps } from 'vant';
Vue.component(Step.name, Step);
Vue.component(Steps.name, Steps);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
Step1
Step2
Step3
Step4
Next
```
```javascript
export default {
data() {
return {
active: 0
};
},
methods: {
nextStep() {
this.active = ++this.active % 4;
}
}
}
```
:::
#### Description
:::demo Description
```html
Step1
Step2
Step3
Step4
```
:::
#### Vertical Steps
:::demo Vertical Steps
```html
【City】Status1
2016-07-12 12:40
【City】Status2
2016-07-11 10:00
【City】Status3
2016-07-10 09:30
```
:::
#### Advanced Usage
:::demo Advanced Usage
```html
Some text
Step1
Step2
Step3
Step4
```
:::
### Steps API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| active | Active step | `Number` | 0 | - |
| icon | Action step icon | `String` | - | - |
| iconClass | Icon class | `String` | - | - |
| title | Title | `String` | - | - |
| description | Description | `String` | - | - |
| direction | Direction | `String` | `horizontal` | `vertical` |
| activeColor | Active step color | `String` | `#06bf04` | - |
### Steps Slot
| Name | Description |
|-----------|-----------|
| icon | Custom icon |
| message-extra | Extra content |