更新时间：2022-04-26 GMT+08:00
步骤条
步骤条组件是用于引导用户按照流程完成任务的导航条。
图1 步骤条组件效果图
在设计页面左侧从“全部组件 > 装饰”中拖出步骤条组件至设计页面右侧空白处。在页面中选中该组件，单击组件上方图标
，配置组件属性，公共属性参数说明请参考组件公共属性说明。
所属区域 |
参数名 |
说明 |
|---|---|---|
样式设置 |
步骤条方向 |
步骤条的显示方向：
|
步骤图标尺寸 |
步骤图标的尺寸，单位为px。 |
|
步骤图标背景 |
步骤图标的背景色。 |
|
完成状态 |
步骤已完成状态的颜色。 |
|
进行中状态 |
步骤进行中状态的颜色。 |
|
等待状态 |
步骤还未完成处于等待状态的颜色。 |
|
标签字体大小 |
步骤标签字体的大小。 |
|
描述文字大小 |
当步骤有描述文字时，描述文字的大小。 |
|
标题左边距 |
步骤标签距离该图标左边的距离。 |
数据源配置
- 选中该组件，在组件上方单击
，配置组件数据源。 - 配置数据系列的数据，单击“保存”。图2 步骤条数据源配置
系统预置了“步骤条数据桥接器”，数据源类型选择“桥接器预置”时，可在“桥接器实例”中选择到该桥接器。这里以静态数据类型数据源为例进行举例说明。静态数据举例如下：
{ "steps": [ { "name": "步骤1", "status": "success", "description": "开发应用" }, { "name": "步骤2", "status": "process", "description": "编译发布应用" }, { "name": "步骤3", "status": "wait", "description": "安装应用" } ] }表2 数据参数说明 参数名
说明
name
字符串类型，表示步骤标签文字。
status
字符串类型，表示步骤状态，取值说明如下：
- success：已完成
- process：进行中
- wait：等待，即未完成
- error：错误
description
步骤描述文字。
父主题： 预置组件说明
