组件 • 进度
进度
这是用于将水平条形图嵌入各种界面的组件。它可以显示数据分布、份额或进度。
§用途
✅ 何时使用 当您需要显示实体完成或填充的程度时,例如磁盘上的可用空间、已完成任务的数量等。
🚫 何时不使用 当您需要显示单个值而不进行比较时。例如,您可以使用 Progress 来显示 15/60,但不能只显示 15。
§结构

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

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

Default 最常用于中性场景,当您不需要额外引起对进度的关注时,例如,当页面包含更重要的元素时。
Info 也用于中性场景,当您需要更强调进度,或表明操作正在进行时。
Success 用于成功完成的流程或指示系统运行正常。
Warning 用于不寻常的情况,以警告用户某事,例如,引起用户对即将发生问题的注意。
Danger 用于吸引最大注意力,当发生错误时,用户需要采取行动来解决问题:磁盘空间不足、系统故障等。
Misc 用于中性场景,当您不想使用 Default 时。
§范围
-
根据进度值更改颜色。您可以配置此组件以根据进度值更改颜色,例如,标准指示是蓝色 (info),而 100% 是绿色 (success)。

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

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

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

-
在卡片中,例如,在问题清单中

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