official/public/docset/ui/wc-steps.md

步骤条 (wc-steps)

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

基础用法

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

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 })

下一步 重置

竖向的步骤条

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

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 })

下一步 重置

特殊功能

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

import '//jscdn.ink/@bd/ui/latest/steps/index.js'