ProgressBar

사용법

레이블

value와 max로 진행률을 표현해요. showValue로 퍼센트 표시를 켤 수 있어요.

스타일 커스터마이징

ProgressBar 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<ProgressBar
  className="shadow-md"
  style={{
    --gtd-progress-track-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<ProgressBar
  classNames={{
    root: "my-progress-bar-root",
    meta: "my-progress-bar-meta",
    label: "my-progress-bar-label",
    value: "my-progress-bar-value",
    track: "my-progress-bar-track",
    indicator: "my-progress-bar-indicator"
  }}
/>

CSS 변수

인터페이스

ProgressBarProps

가져오기

import { ProgressBar } from "@/components/ui/ProgressBar";