• steps 步驟條
  • 屬性說明
  • 示例
    • 代碼示例

steps 步驟條

解釋： 步驟條組件，可配置步驟條內(nèi)容，步驟條狀態(tài)，步驟條上限為8步。適用于信息輸入，并可放置在頁面的任何位置。

屬性說明

steps

Array

是

步驟條數(shù)據(jù)，最多支持 8 個步驟。steps 示例：[{text: ‘標(biāo)題文案標(biāo)題文案標(biāo)題文案’}, {text: ‘標(biāo)題文案標(biāo)題文案標(biāo)題文案’}]，詳細(xì)代碼請閱讀代碼示例

active

Number

否

1

當(dāng)前步驟進(jìn)度

color

String

否

#ccc

步驟條默認(rèn)顏色

activeColor

String

否

#2b99ff

當(dāng)前進(jìn)度步驟條顏色

steps-class

String

否

提供步驟條的擴(kuò)展樣式類，供開發(fā)者自定義組件樣式，可通過此 class 改變步驟條外層樣式

step-class

String

否

提供步驟條的擴(kuò)展樣式類，供開發(fā)者自定義組件樣式，可通過此 class 改變步驟條內(nèi)容樣式

step-main-class

String

否

提供步驟條的擴(kuò)展樣式類，供開發(fā)者自定義組件樣式，可通過此 class 改變步驟條文本樣式

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 WEB IDE 中打開

掃碼體驗(yàn)

代碼示例

請使用百度APP掃碼

代碼示例

• SWAN
• JS
• CSS
• JSON

 
 
 
  
  
  
  
  
  
 
  
  
  
 默認(rèn)樣式
  
  
  
 
  
  
  
 
  
  
  
 active="{{stepsActive}}"
  
  
  
 line-style="solid"
  
  
  
 steps="{{steps}}"
  
  
  
 active-color="#2772fb"
  
  
  
 step-main-class="step-main"
  
  
  
 >
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 bindtap="addStep"
  
  
  
 class="step-btn-cls"
  
  
  
 hover-stop-propagation="true"
  
  
  
 type="primary"
  
  
  
 >
  
  
  
 點(diǎn)擊按鈕添加步驟
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 執(zhí)行展示
  
  
  
 
  
  
  
 
  
  
  
 active="{{fourStepsActive}}"
  
  
  
 line-style="solid"
  
  
  
 steps="{{fourSteps}}"
  
  
  
 active-color="#2772fb"
  
  
  
 step-main-class="step-main"
  
  
  
 >
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 bindtap="changeActive"
  
  
  
 class="step-btn-cls"
  
  
  
 hover-stop-propagation="true"
  
  
  
 type="primary"
  
  
  
 >
  
  
  
 點(diǎn)擊按鈕執(zhí)行步驟