圆形进度条
圆形进度条用于指示不确定的等待时间或直观地表示进程的持续时间。
安装
npx nextui-cli@latest add progress
以上命令仅用于单独安装。如果 @nextui-org/react 已经全局安装，您可以跳过此步骤。
导入
使用
注意: 确保在未提供
label属性时传递aria-label属性。这是可访问性所必需的。
尺寸
颜色
带标签
带值
值格式化
默认情况下，值以百分比格式显示，但可以通过使用 formatOptions 道具来指定不同的格式。 formatOptions 与 Intl.NumberFormat 的 option 参数兼容，并根据当前区域设置应用。
插槽
- base: 圆形进度条的基座插槽，是主要容器。
- svgWrapper: svg 圆圈和值标签的包装器。
- svg: 圆圈的 svg 元素。
- track: 轨道是圆形进度条的背景圆圈。
- indicator: 指示器是根据
value填充的。 - value: 值内容。
- label: 标签内容。
自定义样式
您可以通过将自定义 Tailwind CSS 类传递给组件插槽来自定义 CircularProgress 组件。
数据属性
CircularProgress 在 base 元素上具有以下属性
- data-indeterminate: 指示进度是否是不确定的。
- data-disabled: 指示进度是否已禁用。基于
isDisabled属性。
可访问性
- 通过 ARIA 作为进度条暴露给辅助技术。
- 为可访问性提供标签支持。
- 国际化的数字格式，以百分比或值表示。
- 支持确定和不确定进度。
- 公开
aria-valuenow、aria-valuemin、aria-valuemax和aria-valuetext属性。
API
圆形进度条属性
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| label | ReactNode | 作为标签显示的内容。 | - |
| size | sm | md | lg | 指示器的尺寸。 | md |
| 颜色 | default | primary | secondary | success | warning | danger | 指示器的颜色。 | primary |
| 值 | 数字 | 当前值（受控）。 | - |
| 值标签 | ReactNode | 显示为值标签的内容（例如 1 of 4）。 | - |
| 最小值 | 数字 | 输入允许的最小值。 | 0 |
| 最大值 | 数字 | 输入允许的最大值。 | 100 |
| 格式选项 | Intl.NumberFormat | 用于格式化值的选项。 | {style: 'percent'} |
| 不确定 | 布尔值 | 进度是否不确定。 | true |
| 显示值标签 | 布尔值 | 是否显示值标签。 | true |
| 描边宽度 | 数字 | 进度描边的宽度。 | 2 |
| 禁用 | 布尔值 | 进度是否禁用。 | false |
| 禁用动画 | 布尔值 | 是否禁用动画。 | false |
| 类名 | Record<"base"｜"svgWrapper"｜"svg"｜"track"｜"indicator"｜"value"｜"label", string> | 允许为圆形进度槽设置自定义类名。 | - |
