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

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