进度条

进度条组件允许您查看任何活动的进度。

安装

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

导入

使用

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

尺寸

颜色

不确定状态

您可以使用 isIndeterminate 属性来显示不确定的进度条。当您不知道操作需要多长时间时，这非常有用。

条纹

带标签

注意：如果您传递了 label 属性，则不再需要传递 aria-label 属性。

带值

值格式化

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

插槽

• base：进度条的基础插槽，是主要的容器。
• labelWrapper：标签和值标签的包装器。
• label：进度条的标签。
• value：进度条的值标签。
• track：轨道是进度条的背景条。
• indicator：指示器是根据 value 值填充的条。

自定义样式

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

数据属性

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

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

可访问性

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

接口

Progress 属性