圆形进度条
圆形进度指示器用于指示不确定的等待时间或直观地表示进程的持续时间。
安装
上述命令仅用于单独安装。如果 @nextui-org/react
已全局安装,则可以跳过此步骤。
导入
用法
注意:请确保在未提供
label
属性时,传递aria-label
属性。这是为了可访问性所必需的。
尺寸
颜色
带标签
带值
值格式化
默认情况下,值格式化为百分比,但可以通过使用 formatOptions
属性来指定不同的格式。formatOptions
与 Intl.NumberFormat 的选项参数兼容,并根据当前区域设置应用。
插槽
- 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 |
| |
size |
| "md" |
color |
| "primary" |
value |
| |
valueLabel |
| |
minValue |
| "0" |
maxValue |
| "100" |
formatOptions |
| "{style: 'percent'}" |
isIndeterminate |
| true |
showValueLabel |
| true |
strokeWidth |
| "2" |
isDisabled |
| false |
disableAnimation |
| false |
classNames |
|