进度

这是用于将水平条形图嵌入各种界面的组件。它可以显示数据分布、份额或进度。

用途

何时使用 当您需要显示实体完成或填充的程度时,例如磁盘上的可用空间、已完成任务的数量等。

🚫 何时不使用 当您需要显示单个值而不进行比较时。例如,您可以使用 Progress 来显示 15/60,但不能只显示 15。

结构

Structure

  1. 指示器的颜色。必需部分
  2. 文本。仅与 M 尺寸一起使用,可选部分。
  3. 背景。必需部分

尺寸

Sizes

  1. M 是唯一带有文本的尺寸。用于空间较大的区域,以及进度指示器是关键元素的页面。
  2. S 用于表格、卡片以及进度不是页面上唯一关键组件的独立场景。
  3. XS 用于狭窄的空间,需要保持内容紧凑。

主题

Themes

Default 最常用于中性场景,当您不需要额外引起对进度的关注时,例如,当页面包含更重要的元素时。

Info 也用于中性场景,当您需要更强调进度,或表明操作正在进行时。

Success 用于成功完成的流程或指示系统运行正常。

Warning 用于不寻常的情况,以警告用户某事,例如,引起用户对即将发生问题的注意。

Danger 用于吸引最大注意力,当发生错误时,用户需要采取行动来解决问题:磁盘空间不足、系统故障等。

Misc 用于中性场景,当您不想使用 Default 时。

范围

  1. 根据进度值更改颜色。您可以配置此组件以根据进度值更改颜色,例如,标准指示是蓝色 (info),而 100% 是绿色 (success)。

    Scope

  2. 加载动画。使用它向用户显示实时进度,例如,当从计算机上传文件时。

    Scope

  3. 自定义颜色。当所有其他选项都不适用时,您可以使用自己的一组 Progress 颜色:使用自定义颜色并组合多种颜色。

    Scope

用途

您可以将此组件与文本结合使用,将其嵌入到其他组件中,例如,将 Progress 包装在卡片或表格中,并结合解释性文本、操作等。

  1. 在文件上传/下载区域

    Progress

  2. 在卡片中,例如,在问题清单中

    Progress

  3. 在表格中,例如,显示磁盘使用情况。

    Progress

上一页弹窗
下一页单选框