Progress

Progress 组件可让您查看任何活动的进度。

安装

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

导入

用法

注意：当未提供 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 属性。

API

Progress 属性