- 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-stepsactive="{{stepsActive}}"line-style="solid"steps="{{steps}}"active-color="#2772fb"step-main-class="step-main"></smt-steps></view><buttonbindtap="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-stepsactive="{{fourStepsActive}}"line-style="solid"steps="{{fourSteps}}"active-color="#2772fb"step-main-class="step-main"></smt-steps></view><buttonbindtap="changeActive"class="step-btn-cls"hover-stop-propagation="true"type="primary">点击按钮执行步骤</button></view></view>
