# Steps 步骤条

### 引入

在`index.config.js中引入组件

```json
"usingComponents": {
  "van-steps": "@vant/weapp/steps/index"
}
```

## 代码演示

### 基础用法

```html
      <van-steps
            steps={ this.state.steps }
            active={ this.state.active }
            direction="horizontal"
            customClass="demo-margin-bottom"
            activeColor={'#07c160'}
            inactiveColor={'#969799'}
            activeIcon='checked'
            inactiveIcon={''}
      />
```

```javascript
    state = {
      active: 1,
      steps: [
        {
          text: '步骤一',
          desc: '描述信息'
        },
        {
          text: '步骤二',
          desc: '描述信息'
        },
        {
          text: '步骤三',
          desc: '描述信息'
        },
        {
          text: '步骤四',
          desc: '描述信息'
        }
      ]
    };
```

### 自定义样式

可以通过 `active-icon` 和 `active-color` 属性设置激活状态下的图标和颜色

```html
  <van-steps
            steps={ this.state.steps }
            active={ this.state.active }
            direction="horizontal"
            activeIcon="success"
            activeColor="#38f"
            inactiveIcon="arrow"
          />
```

### 自定义图标

可以通过 `inactiveIcon` 和 `activeIcon` 属性分别设置每一项的图标

```html
<van-steps steps="{{ steps }}" active="{{ active }}" />
```

```javascript

  state = {
    steps: [
      {
        text: '步骤一',
        desc: '描述信息',
        inactiveIcon: 'location-o',
        activeIcon: 'success',
      },
      {
        text: '步骤二',
        desc: '描述信息',
        inactiveIcon: 'like-o',
        activeIcon: 'plus',
      },
      {
        text: '步骤三',
        desc: '描述信息',
        inactiveIcon: 'star-o',
        activeIcon: 'cross',
      },
      {
        text: '步骤四',
        desc: '描述信息',
        inactiveIcon: 'phone-o',
        activeIcon: 'fail',
      },
    ],
  };
```

### 竖向步骤条

可以通过设置`direction`属性来改变步骤条的显示方式

```html
              <van-steps
                   steps={ this.state.steps }
                   active={ this.state.active }
                   direction="vertical"
                   activeColor="#ee0a24"
                   inactiveColor={'#969799'}
                   activeIcon='checked'
                   inactiveIcon={''}
                 />
```

### click事件

可以通过设置`direction`属性来改变步骤条的显示方式

```html
<van-steps
        steps={ this.state.steps }
        onClick-step={()=>this.onClick()}
        active={ this.state.active }
        direction="horizontal"
        customClass="demo-margin-bottom"
        activeColor="#07c160"
        inactiveColor={'#969799'}
        activeIcon='checked'
        inactiveIcon={''}
/>
 <van-button type={'default'} customClass="demo-margin-left" onClick={()=>this.nextStep()}>下一步</van-button>
  <van-toast id="van-toast" />
```

## API
### 注:属性应用在组件上需要统一使用驼峰式命名，如custom-class应变为
```html
<van-button type="primary" customClass='myClass' size="large">大号按钮</van-button>
```
### 注:事件应用在组件上需要统一使用驼峰式命名，如bind:click/bind:search/bind:before-enter应变为
```html
<van-button type="primary" onClick={()=>this.onClick()}>大号按钮</van-button>
<van-search type="primary" onSearch={()=>this.onSearch()}>大号按钮</van-search>
<van-transition type="primary" onBeforeEnter={()=>this.onBeforeEnter()}>大号按钮</van-transition>
```
### Steps Props

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| active | 当前步骤 | _number_ | 0 | - |
| direction | 显示方向，可选值为 `horizontal` `vertical` | _string_ | `horizontal` | - |
| active-color | 激活状态颜色 | _string_ | `#07c160` | - |
| inactive-color | 未激活状态颜色 | _string_ | `#969799` | - |
| active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/icon) | _string_ | `checked` | - |
| inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/icon) | _string_ | - | - |

### Events

| 事件名称        | 说明                 | 回调参数                    |
| --------------- | -------------------- | --------------------------- |
| bind:click-step | 点击步骤时触发的事件 | event.detail:当前步骤的索引 |

### 外部样式类

| 类名         | 说明           |
| ------------ | -------------- |
| custom-class | 根节点样式类   |
| desc-class   | 描述信息样式类 |