环形进度条

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

安装

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

导入

用法

注意：当未提供 label prop 时，请确保传递 aria-label prop。这是无障碍访问所必需的。

尺寸

颜色

带标签

带值

值格式化

默认情况下，值被格式化为百分比，但这可以通过使用 formatOptions prop 来指定不同的格式进行修改。 formatOptions 与 Intl.NumberFormat 的 option 参数兼容，并根据当前区域设置应用。

插槽

• base：环形进度条的基础插槽，它是主容器。
• svgWrapper：svg 圆圈和值标签的包装器。
• svg：圆圈的 svg 元素。
• track：track 是环形进度条的背景圆。
• indicator：indicator 是根据 value 填充的那个。
• value：值内容。
• label：标签内容。

自定义样式

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

数据属性

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

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

可访问性

• 通过 ARIA 作为进度条暴露给辅助技术。
• 为可访问性提供标签支持。
• 国际化的数字格式化，可作为百分比或值。
• 确定性和不确定性进度支持。
• 暴露 aria-valuenow、aria-valuemin、aria-valuemax 和 aria-valuetext 属性。

API

Circular Progress 组件属性