• steps 步骤条
  • 属性说明
  • 示例
    • 代码示例

steps 步骤条

解释： 步骤条组件，可配置步骤条内容，步骤条状态，步骤条上限为8步。适用于信息输入，并可放置在页面的任何位置。

属性说明

steps

Array

是

步骤条数据，最多支持 8 个步骤。steps 示例：[{text: ‘标题文案标题文案标题文案’}, {text: ‘标题文案标题文案标题文案’}]，详细代码请阅读代码示例

active

Number

否

1

当前步骤进度

color

String

否

#ccc

步骤条默认颜色

activeColor

String

否

#2b99ff

当前进度步骤条颜色

steps-class

String

否

提供步骤条的扩展样式类，供开发者自定义组件样式，可通过此 class 改变步骤条外层样式

step-class

String

否

提供步骤条的扩展样式类，供开发者自定义组件样式，可通过此 class 改变步骤条内容样式

step-main-class

String

否

提供步骤条的扩展样式类，供开发者自定义组件样式，可通过此 class 改变步骤条文本样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN
• JS
• CSS
• JSON

 
 
 
  
  
  
  
  
  
 
  
  
  
 默认样式
  
  
  
 
  
  
  
 
  
  
  
 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"
  
  
  
 >
  
  
  
 点击按钮添加步骤
  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
 执行展示
  
  
  
 
  
  
  
 
  
  
  
 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"
  
  
  
 >
  
  
  
 点击按钮执行步骤