ProgressBar
ProgressBar는 시작과 끝이 있는 작업의 진행 정도를 보여줍니다. 디스크 사용량이나 점수처럼 고정된 척도의 측정값에는 Meter를 사용합니다.Property
Size
Track의 높이를 설정합니다.
Type
작업의 상태를 나타냅니다.
Value Text
ProgressBar.Value는 선언한 범위를 기준으로 값을 백분율로 환산해 보여줍니다.
Indeterminate
value가 null이면 진행률을 알 수 없는 상태입니다. 30% 폭의 세그먼트가 Track을 왕복하고 aria-valuenow는 쓰이지 않습니다.
Examples
Description
ProgressBar.Description은 진행 상황을 말로 풀어 씁니다. 남은 용량, 실패 사유, 다음에 할 일 같은 내용입니다.
ProgressBar.Root의 type이 error이면 이 텍스트가 danger 색이 되고 막대는 흐린 Track만 남습니다.
Accessibility
ProgressBar.Label을 넣거나ProgressBar.Root에aria-label또는aria-labelledby를 주세요. 이름이 없으면 보조기기가 숫자만 읽습니다. 개발 모드에서는 콘솔 경고가 나옵니다.- 실패 사유나 다음 행동은
ProgressBar.Description에 적으세요.type="error"는 겉모습만 바꿉니다. 실패했다는 사실은 문구가 직접 말해야 합니다. 색과 흐려진 막대만으로는 스크린 리더 사용자도, 빨강과 회색을 구별하지 못하는 사용자도 실패를 알 수 없습니다. - 진행 상황을 막대 길이만으로 전달하지 마세요.
ProgressBar.Value나ProgressBar.Description으로 텍스트를 함께 두면 확대 화면이나 저시력 환경에서도 값을 읽을 수 있습니다.
Props Table
ProgressBar.Root
Loading component documentation...
ProgressBar.Label
Loading component documentation...
ProgressBar.Value
Loading component documentation...
ProgressBar.Track
Loading component documentation...
ProgressBar.TrackPrimitive
Loading component documentation...
ProgressBar.IndicatorPrimitive
Loading component documentation...
ProgressBar.Description
Loading component documentation...