데이터와 피드백@neumorphism-ui/progress

Progress

Base UI Progress의 progressbar 시맨틱을 사용합니다. 유효한 max와 value를 정규화하며 value가 없거나 유효하지 않으면 indeterminate 상태로 전달합니다.

@neumorphism-ui/progress

Registry JSON

미리보기

Registry 빌드82%

테마 토큰12 / 16

데이터 대기 중—

설치

npx shadcn@latest add @neumorphism-ui/progress

CLI가 npm 의존성, base 토큰, 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 레퍼런스

접근성