跳到正文
GitHub

反馈

Progress

一条会填充的进度条;终点未知时它来回扫。

示例

determinate

Uploading photos62%

说明

一根会填充的条;终点未知时它会来回扫。

平的:轨道是 --stone,填充是 --ink。白色重置没有渐变也没有光晕,所以承载读数的只有这两者之间的那条边界。

属性

Progress props
属性类型默认值说明
label必填string说明在进行的是什么。必填:一根光秃秃的条什么都没播报。
showValuebooleanfalse在条的上方打印百分比。只有设了 `value` 时才有意义。
valuenumber | nullnull0–100。当时长确实未知时不要传(或传 `null`)——条会改成来回扫而不是填充,同时 Radix 会去掉 `aria-valuenow`,于是读屏软件听到的是“不确定”,而不是一个猜出来的数字。

同时接受 Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value'> 里的全部属性,它们会直接透传给底层元素,不再逐条列出。

无障碍

  • 不传 value 会去掉 aria-valuenow,读屏听到的是“不确定”,而不是一个猜出来的数字。
  • label 必填——一条没有名字的进度条什么也没说。