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

steps 步骤条

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

属性说明

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

• SWAN
• JS
• CSS
• JSON

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">默认样式</view>
  
  
  
 <view class="border-bottom">
  
  
  
 <smt-steps
  
  
  
 active="{{stepsActive}}"
  
  
  
 line-style="solid"
  
  
  
 steps="{{steps}}"
  
  
  
 active-color="#2772fb"
  
  
  
 step-main-class="step-main"
  
  
  
 >
  
  
  
 </smt-steps>
  
  
  
 </view>
  
  
  
 <button
  
  
  
 bindtap="addStep"
  
  
  
 class="step-btn-cls"
  
  
  
 hover-stop-propagation="true"
  
  
  
 type="primary"
  
  
  
 >
  
  
  
 点击按钮添加步骤
  
  
  
 </button>
  
  
  
 </view>
  
  
  
 <view class="card-area">
  
  
  
 <view class="top-description border-bottom">执行展示</view>
  
  
  
 <view class="border-bottom">
  
  
  
 <smt-steps
  
  
  
 active="{{fourStepsActive}}"
  
  
  
 line-style="solid"
  
  
  
 steps="{{fourSteps}}"
  
  
  
 active-color="#2772fb"
  
  
  
 step-main-class="step-main"
  
  
  
 >
  
  
  
 </smt-steps>
  
  
  
 </view>
  
  
  
 <button
  
  
  
 bindtap="changeActive"
  
  
  
 class="step-btn-cls"
  
  
  
 hover-stop-propagation="true"
  
  
  
 type="primary"
  
  
  
 >
  
  
  
 点击按钮执行步骤
  
  
  
 </button>
  
  
  
 </view>
  
  
  
</view>