圆形进度条

圆形进度指示器用于指示不确定的等待时间或直观地表示进程的持续时间。

安装

上述命令仅用于单独安装。如果 @nextui-org/react 已全局安装，则可以跳过此步骤。

导入

用法

注意：请确保在未提供 label 属性时，传递 aria-label 属性。这是为了可访问性所必需的。

尺寸

颜色

带标签

带值

值格式化

默认情况下，值格式化为百分比，但可以通过使用 formatOptions 属性来指定不同的格式。formatOptions 与 Intl.NumberFormat 的选项参数兼容，并根据当前区域设置应用。

插槽

• base: 圆形进度的基本插槽，它是主容器。
• svgWrapper: svg 圆形和值标签的包装器。
• svg: 圆形的 svg 元素。
• track: 轨道是圆形进度的背景圆。
• indicator: 指示器是根据 value 填充的。
• value: 值内容。
• label: 标签内容。

自定义样式

你可以通过将自定义的 Tailwind CSS 类传递给组件插槽来自定义 CircularProgress 组件。

数据属性

CircularProgress 在 base 元素上具有以下属性

• data-indeterminate：指示进度是否不确定。
• data-disabled：指示进度是否已禁用。基于 isDisabled 属性。

无障碍性

• 通过 ARIA 作为进度条向辅助技术公开。
• 支持无障碍的标签。
• 国际化的数字格式化为百分比或值。
• 确定和不确定的进度支持。
• 公开 aria-valuenow、aria-valuemin、aria-valuemax 和 aria-valuetext 属性。

API

圆形进度属性