## 步骤条 (`wc-steps`)
> 引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。


### 基础用法

设置 `active` 属性，接受一个 `Number`，表明步骤的序号，从 0 开始。 

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/steps/index.js'
import '//jscdn.ink/@bd/ui/latest/form/button.js'
import { $, bind } from '@bd/core'

let next = $('.next')
let reset = $('.reset')
let steps = $('wc-steps')

bind(next, 'click', ev => {
  steps.active += 1
})
bind(reset, 'click', ev => {
  steps.active = 0
})
  </wc-lang>
  <wc-lang slot="html">
<wc-steps>
  <wc-step title="步骤1" description="步骤1 的说明"></wc-step>
  <wc-step title="步骤2" description="步骤2 的说明"></wc-step>
  <wc-step title="步骤3" description="步骤3 的说明"></wc-step>
</wc-steps>

<wc-button class="next">下一步</wc-button>
<wc-button class="reset">重置</wc-button>
  </wc-lang>
</wc-sandbox>


### 竖向的步骤条

只需要加个`vertical`属性,即可一键调整为纵向布局。

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/steps/index.js'
import '//jscdn.ink/@bd/ui/latest/form/button.js'
import { $, bind } from '@bd/core'

let next = $('.next')
let reset = $('.reset')
let steps = $('wc-steps')

bind(next, 'click', ev => {
  steps.active += 1
})
bind(reset, 'click', ev => {
  steps.active = 0
})
  </wc-lang>
  <wc-lang slot="html">
<wc-steps vertical>
  <wc-step title="步骤1" description="步骤1 的说明"></wc-step>
  <wc-step title="步骤2" description="步骤2 的说明"></wc-step>
  <wc-step title="步骤3" description="步骤3 的说明"></wc-step>
</wc-steps>

<wc-button class="next">下一步</wc-button>
<wc-button class="reset">重置</wc-button>
  </wc-lang>
</wc-sandbox>


### 特殊功能

默认步骤的序号是自动生成的数字, 如果有需要, 可以自行换成图标, 只需要设置`icon`属性即可。

<wc-sandbox>
  <wc-lang slot="javascript">
import '//jscdn.ink/@bd/ui/latest/steps/index.js'
  </wc-lang>
  <wc-lang slot="html">
<wc-steps>
  <wc-step icon="home" title="步骤1" description="步骤1 的说明"></wc-step>
  <wc-step icon="fly" title="步骤2" description="步骤2 的说明"></wc-step>
  <wc-step icon="headset" title="步骤3" description="步骤3 的说明"></wc-step>
</wc-steps>
  </wc-lang>
</wc-sandbox>