Circular Progress

环形进度条用于指示不确定的等待时间，或直观展示过程的持续时间。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

用法

注意：当未提供 label 属性时，请确保传递 aria-label 属性。这是为了满足无障碍访问的要求。

尺寸

颜色

带标签

带数值

数值格式化

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

插槽 (Slots)

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

自定义样式

您可以通过向组件插槽传递自定义的 Tailwind CSS 类来定制 CircularProgress 组件。

数据属性

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

• data-indeterminate: 指示进度条是否为不确定状态。
• data-disabled: 指示进度条是否被禁用。基于 isDisabled 属性。

无障碍访问 (Accessibility)

• 通过 ARIA 作为进度条暴露给辅助技术。
• 支持无障碍访问的标签功能。
• 支持国际化的数字格式化（百分比或数值）。
• 支持确定性和不确定性进度。
• 暴露 aria-valuenow, aria-valuemin, aria-valuemax 和 aria-valuetext 属性。

API

Circular Progress 属性