Skip to content

Progress 进度条

进度展示组件。

示例

可访问性

Progress 默认渲染为 role="progressbar",并根据 percent 同步 aria-valueminaria-valuemaxaria-valuenowaria-valuetext。当页面中有多个进度条时,建议通过 aria-labelaria-labelledby 提供可区分名称。

format 会自定义可见进度文本;当 format 返回字符串或数字时,该内容也会作为默认 aria-valuetext。如果格式化结果是复杂节点,或需要让屏幕阅读器读取更完整的上下文,请显式传入 aria-valuetext

API

属性说明类型默认值
percent百分比number-
status状态'normal' | 'success' | 'exception''normal'
showInfo显示百分比文字booleantrue
format自定义进度文本(percent: number) => ReactNode-
aria-label进度条可访问名称string'Progress'
aria-labelledby使用外部标签命名进度条string-
aria-valuetext自定义屏幕阅读器读取的进度文本string${percent}%