跳到正文

Progress 进度条

LinearProgress 是进度条,CircularProgress 是进度环,都用来表示任务进行到哪里。不传 percentage 时是不确定进度,在不知道工作量时循环播放。mini 的 CircularProgress 是一个很小的圆环或饼图,放在表格单元格里或聊天消息旁边。

演示

进度条

percentage 取 0 到 100,数值变化时进度条平滑过渡。

状态

status 决定填充颜色:default、info、success、warning 或 error。非默认状态在进度条外显示图标而不是百分比。

指示器

indicatorPlacement="inside" 把百分比放进加高的填充里;showIndicator={false} 隐藏指示器;unit 跟在数字后面。

处理中

processing 让一道光扫过填充,表示仍在进行。

进度环

CircularProgress 接受同样的 percentage 和 status,指示器在中间。

进度环尺寸

size 是直径(px),文字随之缩放。strokeWidth 相对于 100 个单位宽的圆,所以小的环需要更粗的描边。

仪表盘

gapDegree 在底部留出缺口;gapOffsetDegree 旋转缺口。children 替换指示器。

不确定进度

不传 percentage 时,一段填充沿进度条滑动,或四分之一圆弧绕环旋转,并且不输出 aria-valuenow。在减少动态效果的设置下它不再移动,只做淡入淡出。

迷你

mini 生成一个大约一行文字高的圆环,放在表格单元格里或聊天消息旁边,比如表示有多少人已读。miniShape="pie" 改为从 12 点方向顺时针填充的扇形;success 状态的饼图到 100% 时显示一个对勾。迷你模式忽略 size、strokeWidth、缺口和指示器,轨道是填充色的浅色调。

颜色

color、railColor 和 indicatorTextColor 覆盖主题颜色:从 Raft 色板 取色,就会跟随主题变化。

共有 Props

名称类型默认值说明版本
percentagenumberundefined0 到 100。不传时为不确定进度。未发布
statusdefault | info | success | warning | errordefault填充颜色角色;非默认状态以图标作为指示器。未发布
showIndicatorbooleantrue显示百分比或状态图标。未发布
unitstring%跟在百分比后面。未发布
colorstringundefined自定义填充颜色。未发布
railColorstringundefined自定义轨道颜色。未发布
indicatorTextColorstringundefined自定义指示器文字颜色。未发布
childrenReactNodeundefined替换指示器。未发布

LinearProgress Props

名称类型默认值说明版本
indicatorPlacementinside | outsideoutside放在轨道后面,或放进加高的填充里。未发布
heightnumberundefined轨道高度(px),默认取主题的高度。未发布
processingbooleanfalse一道光扫过填充。未发布

CircularProgress Props

名称类型默认值说明版本
sizenumberundefined直径(px),默认取主题的尺寸(120)。未发布
strokeWidthnumber7相对于 100 个单位宽的圆的描边宽度。未发布
gapDegreenumber0底部留出的缺口角度。不确定进度时忽略。未发布
gapOffsetDegreenumber0顺时针旋转缺口。未发布
minibooleanfalse主题迷你尺寸的小圆环或饼图,没有指示器。未发布
miniShapering | piering迷你进度的样式。未发布

进度条分成 LinearProgress 和 CircularProgress 两个组件;仪表盘就是带 gapDegree 的 CircularProgress。暂不支持一个进度里放多个圆环,也不支持渐变色。两者都渲染 role="progressbar",带 aria-valuemin、aria-valuemax,确定进度时还带 aria-valuenow:请给每个进度条一个 aria-label。