进度条

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

安装

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

导入

用法

注意：当没有提供 label prop 时，请确保传递 aria-label prop。 这是出于可访问性的需要。

尺寸

颜色

不确定

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

条纹

带标签

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

带值

值格式化

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

插槽

• 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

进度条属性