Progress 进度Progress · ProgressRing · Meter
Progress 和 ProgressRing 表示一件事做到了多少(上传、导入、加载);Meter 表示一个量现在有多大(电平、容量、强度)。等待时间很短或无法估计时用 Spinner。
进度条
value 在 0 到 max 之间。条用 soft 弹簧追赶真实进度;到 100% 自动变成成功色。
设计稿.fig 已上传 30%
尺寸、颜色与不确定进度
三档粗细:sm 4、md 8(默认)、lg 12。tone 换颜色;noDoneState 让 100% 时保持原色。不传 value 就是不确定进度,一小段条来回移动。
进度环
空间小或需要突出百分比时用环。直径 sm 40、md 64(默认)、lg 96,或像素值;中间的数字滚动更新(sm 放不下,默认不显示)。children 可以换掉中间的内容。
3 / 5
Meter 分段电平
只读的分段量条。segments 是段数;warnAt / dangerAt 让达到阈值的段变成警告色 / 危险色(像峰值表的黄区和红区)。传了 tone 就固定用一种颜色。拖动滑块看看。
尺寸与固定颜色
规格
- 条
- 高 8 · 圆头
- 追赶
- spring-soft 587ms
- 不确定
- 1.5s 循环 · 宽度呼吸
- 完成
- 到 100% 变成成功色
接口
Progress
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | null | — | 当前值;不传(或 null)就是不确定进度。 |
max | number | 100 | 最大值。 |
label | string | — | 进度条的名字(aria-label)。没有可见标签时必须给。 |
tone | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'accent' | 条的颜色。 |
size | 'sm' | 'md' | 'lg' | 'md' | 粗细:4 / 8 / 12。 |
noDoneState | boolean | — | 到 100% 时不要自动变绿。 |
ProgressRing
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | 0 | 当前值。 |
max | number | 100 | 最大值。 |
label | string | — | 名字(aria-label)。 |
size | 'sm' | 'md' | 'lg' | number | 'md' | 直径:40 / 64 / 96,或像素值。 |
thickness | number | 6 | 环的粗细(按 36 的视图坐标)。 |
showValue | boolean | — | 中间显示百分比。默认直径 ≥ 56 时显示。 |
children | ReactNode | — | 自定义中间的内容,替换百分比。 |
noDoneState | boolean | — | 到 100% 时不要自动变绿。 |
Meter
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value* | number | — | 当前值。 |
min / max | number | 0 / 100 | 取值范围。 |
segments | number | 10 | 分成几段。 |
label | string | — | 名字(aria-label)。 |
valueText | string | — | 给读屏的数值说法,如“68%”“3 / 5 格”。 |
tone | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | — | 固定颜色。不传时按 warnAt / dangerAt 自动变色。 |
warnAt / dangerAt | number | — | 达到这个值的段显示成警告色 / 危险色。 |
size | 'sm' | 'md' | 'lg' | 'md' | 高度:8 / 16 / 24。 |
无障碍
- Progress 和 ProgressRing 是
role="progressbar",带aria-valuemin / max / now;不确定进度不写这三个值,读屏会报“忙碌”。 - Meter 是
role="meter";数值本身不好理解时用valueText给出人话(“中等”“3 / 5 格”)。 - 三者都需要名字:用
label,或用aria-labelledby指向旁边可见的文字。 - 只读,不可聚焦,没有键盘操作。进度变化读屏不会逐次播报;完成时请另外给出文字或 Toast。
- 完成变绿、电平变红都只是颜色提示,重要的状态变化要同时体现在文字上。