步骤条

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

基本用法

简单的步骤条。

<div id="steps1">
  <div class="step" step-title="第一步" step-icon="1" step-desc="这是第一步" step-status="process" isText=true></div>
  <div class="step" step-title="第二步" step-icon="2" step-desc="这是第二步" step-status="process" isText=true></div>
  <div class="step" step-title="第三步" step-icon="3" step-desc="这是第三步" step-status="process" isText=true></div>
  <div class="step" step-title="第四步" step-icon="4" step-desc="这是第四步" step-status="process" isText=true></div>
  <div class="step" step-title="第五步" step-icon="5" step-desc="这是第五步" step-status="process" isText=true></div>
</div>
<button class="woui-btn woui-btn-red" onclick="getValue()">获取值</button>
<button class="woui-btn woui-btn-red" onclick="previous()">上一步</button>
<button class="woui-btn woui-btn-red" onclick="next()">下一步</button>
<button class="woui-btn woui-btn-red" onclick="move()">跳转到第三步</button>

var steps1 = new woUI.Steps({
  id: '#steps1',
  direction: 'horizontal',
  active: 1
})
function getValue() {
  steps1.getCurrentValue(function (result) {
    alert('打开console.log查看结果')
    console.log(result)
  })
}
function next() {
  steps1.next();
}
function previous() {
  steps1.previous();
}
function move() {
  steps1.move({
    active: 3
  })
}

带图标的步骤条

步骤条内可以启用各种自定义的图标。

<div id="steps2">
  <div class="step" step-title="第一步" step-icon="<i class='woui-icon icon-pin'></i>" step-desc="这是第一步" step-status="process" isText=false></div>
  <div class="step" step-title="第二步" step-icon="<i class='woui-icon icon-pin'></i>" step-desc="这是第二步" step-status="process" isText=false></div>
  <div class="step" step-title="第三步" step-icon="<i class='woui-icon icon-pin'></i>" step-desc="这是第三步" step-status="process" isText=false></div>
  <div class="step" step-title="第四步" step-icon="<i class='woui-icon icon-pin'></i>" step-desc="这是第四步" step-status="process" isText=false></div>
  <div class="step" step-title="第五步" step-icon="<i class='woui-icon icon-pin'></i>" step-desc="这是第五步" step-status="process" isText=false></div>
</div>
<button class="woui-btn woui-btn-red" onclick="getValue2()">获取值</button>
<button class="woui-btn woui-btn-red" onclick="previous2()">上一步</button>
<button class="woui-btn woui-btn-red" onclick="next2()">下一步</button>
<button class="woui-btn woui-btn-red" onclick="move2()">跳转到第三步</button>

var steps2 = new woUI.Steps({
  id: '#steps2',
  direction: 'horizontal',
  active: 0
})
function getValue2() {
  steps2.getCurrentValue(function (result) {
    console.log(result)
  })
}
function next2() {
  steps2.next();
}
function previous2() {
  steps2.previous();
}
function move2() {
  steps2.move({
    active: 3
  })
}

竖式步骤条

竖直方向的步骤条。

<div id="steps3">
  <div class="step" step-title="第一步" step-icon="1" step-desc="这是第一步" step-status="process" isText=true></div>
  <div class="step" step-title="第二步" step-icon="2" step-desc="这是第二步" step-status="process" isText=true></div>
  <div class="step" step-title="第三步" step-icon="3" step-desc="这是第三步" step-status="process" isText=true></div>
  <div class="step" step-title="第四步" step-icon="4" step-desc="这是第四步" step-status="process" isText=true></div>
  <div class="step" step-title="第五步" step-icon="5" step-desc="这是第五步" step-status="process" isText=true></div>
</div>
<button class="woui-btn woui-btn-red" onclick="getValue3()">获取值</button>
<button class="woui-btn woui-btn-red" onclick="previous3()">上一步</button>
<button class="woui-btn woui-btn-red" onclick="next3()">下一步</button>
<button class="woui-btn woui-btn-red" onclick="move3()">跳转到第三步</button>

var step3 = new woUI.Steps({
  id: '#steps3',
  direction: 'vertical',
  active: 0
})
function getValue3() {
  step3.getCurrentValue(function (result) {
    console.log(result)
  })
}
function next3() {
  step3.next();
}
function previous3() {
  step3.previous();
}
function move3() {
  step3.move({
    active: 3
  })
}

Options 参数

参数	说明	类型	可选值	默认值
id	绑定元素id (需支持queryselector)	string	-	`null`
space	每个 step 的间距，不填写将自适应间距。支持百分比。	number	-	`0`
direction	显示方向	string	vertical/horizontal	`horizontal`
processStatus	设置当前步骤的状态	string	wait / process / finish / error / success	`process`
finishStatus	设置结束步骤的状态	string	wait / process / finish / error / success	`finish`
active	设置当前激活步骤	number	-	`0`

步骤条 API

初始化

new woUI.Steps(option)

option: option请参照表格信息。

获取当前状态

Steps.prototype.getCurrentValue(callback)

callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

返回状态

参数	说明	类型
active	当前激活步骤	`number`
direction	显示方向	`string`
processStatus	当前步骤的状态	`string`
finishStatus	结束步骤的状态	`string`
el	当前步骤`div`	`object`
status	当前步骤`div`的`classlist`	`object`

跳转到指定步数

Steps.prototype.move(params, callback)

params: 参数说明

参数	说明	类型
active	目标步骤	number
title	目标到达后标题	string
desc	目标到达后描述	string
icon	目标到达后图标类名	string
status	目标到达后状态	string

callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

跳转到前一步

Steps.prototype.previous(params, callback)

params: 参数说明

参数	说明	类型
active	目标步骤	number
desc	目标到达后描述	string
icon	目标到达后图标类名	string
status	目标到达后状态	string

callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

跳转到下一步

Steps.prototype.next(params, callback)

params: 参数说明

参数	说明	类型
active	目标步骤	number
desc	目标到达后描述	string
icon	目标到达后图标类名	string
status	目标到达后状态	string

callback: 可向方法内输送回调函数, 在动作结束后回调使用, 传入的callback必须是一个function

步骤条