更新时间:2022-04-26 GMT+08:00
分享

步骤条

步骤条组件是用于引导用户按照流程完成任务的导航条

图1 步骤条组件效果图

在设计页面左侧从“全部组件 > 装饰”中拖出步骤条组件至设计页面右侧空白处。在页面中选中该组件,单击组件上方图标,配置组件属性,公共属性参数说明请参考组件公共属性说明

表1 步骤条高级设置参数说明

所属区域

参数名

说明

样式设置

步骤条方向

步骤条的显示方向:

  • 水平方向
  • 垂直方向

步骤图标尺寸

步骤图标的尺寸,单位为px。

步骤图标背景

步骤图标的背景色

完成状态

步骤已完成状态的颜色。

进行中状态

步骤进行中状态的颜色。

等待状态

步骤还未完成处于等待状态的颜色。

标签字体大小

步骤标签字体的大小。

描述文字大小

当步骤有描述文字时,描述文字的大小。

标题左边距

步骤标签距离该图标左边的距离。

数据源配置

  1. 选中该组件,在组件上方单击,配置组件数据源。
  2. 配置数据系列的数据,单击“保存”。

    图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

    步骤描述文字。

分享:

    相关文档

    相关产品

close