跳到主要内容

进度条

展示当前操作的进度。

何时使用

在操作需要较长时间才能完成时,为用户显示该操作的当前进度和状态:

  • 当一个操作会打断当前界面,或者需要在后台运行,且耗时可能超过 2 秒时
  • 当需要显示一个操作完成的百分比时

一、属性

**引用标识:**详见通用属性。

1. 数据

image-20250618152639200

支持手动赋值、字段等四种方式,具体绑定方式详见 数据绑定

2. 功能

**类型:**支持切换进度条类型,提供三种样式(线性、圆形和仪表盘)。

image-20240829104813900

**数值/图标:**设置进度条组件是否展示具体的进度,默认开启。关闭后的状态如下图所示:

image-20250618154032112

**总步数:**用于线性进度条,设置后将以指定步长显示格子:

image-20250618153752018

设置为 10 时效果如下:

image-20240829104945222

**缺口角度 & 缺口位置:**用于仪表盘样式,设置缺口形态:

image-20240829105058551

设置效果如下:

  • 缺口角度:

    image-20240829105342360

  • 缺口方向:

    image-20240829105412517

3. 外观

image-20250618154825096

**尺寸:**提供两种尺寸选项,用于调节进度条大小。

image-20240829110143112

**线宽:**设置进度条的粗细。

image-20240829110425929

**背景色 & 颜色:**分别设置未完成与已完成部分的颜色。

image-20240829110640244

**边缘形状:**支持圆角和方角两种样式。

image-20240829110331625

4. 状态

**状态:**支持三种状态:成功、失败、常规。默认状态为常规。

三种类型进度条在不同状态下的显示效果如下:

  • 线性:

    image-20240829111534167

  • 圆形:

    image-20250618155032202

  • 仪表盘:

    image-20240829111328809

**隐藏:**详见通用属性。

二、样式

详见通用属性。

三、常见使用场景

  1. 表格中展示当前任务的进度百分比:

image-20240829112649543