88 lines
2.4 KiB
Markdown
88 lines
2.4 KiB
Markdown
|
## 步骤条 (`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>
|