数据与反馈@neumorphism-ui/progress

Progress

使用 Base UI Progress 的 progressbar 语义。会规范化有效的 max 和 value；当 value 缺失或无效时，以 indeterminate 状态呈现。

@neumorphism-ui/progress

Registry JSON

预览

Registry 构建82%

主题 token12 / 16

等待数据—

安装

npx shadcn@latest add @neumorphism-ui/progress

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

import { Progress } from "@/components/ui/progress"

Example

<div className="grid gap-2">
  <div id="upload-label" className="flex justify-between">
    <span>文件上传</span>
    <span>72%</span>
  </div>
  <Progress value={72} max={100} aria-labelledby="upload-label" />
</div>

API 参考

组件	属性	类型	默认值	说明
`Progress`	`value`	`number \| null`	`null`	当前进度值，会被限制在 0 与 max 之间。
`Progress`	`max`	`number`	`100`	大于 0 的总范围；无效时使用 100。
`Progress`	`aria-label / aria-labelledby`	`string`	`—`	为进行中的任务提供无障碍名称。
`Progress`	`getValueLabel`	`(value, max) => string`	`—`	在数值之外需要额外说明时生成 aria-valuetext。

预览

安装

用法

Import

Example

API 参考

无障碍