Progress
크기와 의미 있는 상태 축을 갖는 확정·비확정 작업 진행률이에요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
variant | neutral, info, success, warning, danger | neutral |
uiSize | md, lg | md |
| parts | Root, Label, Track, Indicator, Value | compound API |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/progress.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRProgress } from '@tinyrack/ui/components/progress';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
크기 고유 링크
주변 레이아웃에 맞는 트랙 두께를 선택하세요. 크기는 작업의 중요도를 나타내지 않아요.
의미별 상태 고유 링크
작업의 의미에 따라 `variant`를 설정하세요. Progress는 숫자 값만으로 상태를 추론하지 않아요.
사용자 정의 범위와 형식 고유 링크
시각적 채움, 표시 값, 접근 가능한 값 텍스트가 모두 같은 0–64 GB 범위를 공유해요.
API
Base UI가 값의 의미를 제공해요. 비결정적 진행률에는 null을 전달해 aria-valuenow를 생략해요. 모션 감소 설정에서는 움직이는 인디케이터가 비활성화돼요.
Root 속성
| prop | 타입 | 기본값 | 용도 |
|---|---|---|---|
value | number | null | 필수 | 현재 값. null이면 비결정적 진행률 |
min | number | 0 | 범위 최솟값 |
max | number | 100 | 범위 최댓값 |
format | Intl.NumberFormatOptions | — | Value와 기본 접근성 값 텍스트 형식 지정 |
locale | Intl.LocalesArgument | 런타임 로케일 | Intl.NumberFormat 로케일 |
getAriaValueText | (formattedValue, value) => string | 내장 함수 | aria-valuetext 사용자 지정 |
uiSize | md | lg | md | 트랙 두께 |
variant | neutral | info | success | warning | danger | neutral | 의미별 채움 색상 |
render | Base UI render prop | <div> | 동작을 유지하면서 루트 요소 교체 |
TRProgressStatus는 'indeterminate' | 'progressing' | 'complete'예요. Root와 모든 part는 해당 네이티브 prop, className, style, ref도 받아요.
파트
| part | 기본 요소 | 용도 |
|---|---|---|
Root | div | 접근 가능한 progressbar와 범위 컨텍스트 |
Label | span | 화면에 표시되는 접근 가능한 이름 |
Track | div | 전체 범위 표면 |
Indicator | div | 확정 채움 또는 비결정적 모션 |
Value | span | 형식이 지정된 표시 값 |
토큰
| CSS token | 기본값 | 용도 |
|---|---|---|
--tr-progress-background | --tinyrack-surface-muted | 트랙 표면 |
--tr-progress-fill | 의미별 variant 색상 | 인디케이터 채움 |
--tr-progress-height | 크기 레시피 | 트랙 두께 |
--tr-progress-radius | --tinyrack-radius-full | 트랙 반지름 |
--tr-progress-duration | --tinyrack-duration-normal | 확정 너비 전환 시간 |
--tr-progress-easing | --tinyrack-ease-out | 확정 전환 easing |
--tr-progress-indeterminate-duration | --tinyrack-duration-loading | 비결정적 주기 |
--tr-progress-indeterminate-easing | --tinyrack-ease-linear | 비결정적 easing |
--tr-progress-indeterminate-width | 40% | 움직이는 인디케이터 너비 |