ProgressBar
진행률을 가로 막대로 보여 준다. 채운 부분은 기본으로 서비스 주색 그라데이션이다.
- 분류
- 데이터 표시
- 가져오기
import { ProgressBar } from '@/ui/charts'- 코드 위치
apps/mobile/src/ui/charts.tsx:110
미리보기#
실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.
언제 쓰는가#
쓴다
- 자료 처리, 단원 진도처럼 한 줄에서 진행 정도를 보일 때 쓴다.
- 막대 옆이나 위에 퍼센트 글자를 함께 쓴다.
쓰지 않는다
- 문제를 한 칸씩 푸는 흐름에는 쓰지 않는다.
SegmentedProgress를 쓴다. - 값이 없는 상태에 빈 막대만 두지 않는다. 글자("준비 중")를 함께 쓴다.
종류#
| 이름 | 설명 |
|---|---|
| 그라데이션 (기본) | tint를 생략하면 gradient(왼쪽 → 오른쪽). |
| 단색 | tint에 색 문자열을 주면 그 색으로 채운다. |
| 2색 | tint에 [시작, 끝]을 주면 그 그라데이션으로 채운다. |
크기#
| 이름 | 값 | 설명 |
|---|---|---|
| 기본 | 높이 8 | height로 바꾼다. 모서리는 높이와 같아서 양 끝이 둥글다. |
상태#
| 상태 | 모습과 동작 |
|---|---|
| 0% | 채움이 없고 track 바탕만 보인다. |
| 진행 중 | 기본 모습이다. |
| 100% | 기본 모습이다. |
사용 방법#
기본
기본
import { ProgressBar } from '@/ui/charts';
<ProgressBar value={done / total} />
<ProgressBar value={0.8} tint={color.success} height={12} />속성(props)#
| 이름 | 타입 | 기본값 | 필수 | 설명 |
|---|---|---|---|---|
value | number | — | 필수 | 진행률(0~1). |
height | number | 8 | 선택 | 높이(px). 기본 8. |
tint | string | readonly [string, string] | — | 선택 | 채움 색. 생략하면 gradient, 문자열이면 단색, [시작, 끝]이면 그 그라데이션. |
track | string | color.track | 선택 | 바탕 색. 기본 color.track. |
치수와 토큰#
- 높이와 모서리
- 높이 8, 모서리는 높이와 같다
- 색
- 바탕
track, 채움gradient
접근성#
- 역할은
progressbar, 값 0~100이 전달된다. - 퍼센트 글자를 함께 쓴다.
잘한 예와 잘못한 예#
60%
함께 보는 컴포넌트#
- SegmentedProgress: 문제 하나에 칸 하나씩, 푼 문제만큼 칸이 채워지는 진행 막대다. 퀴즈 맨 위에 쓴다.
- ProgressRing: 진행률을 둥근 고리로 보여 준다.
ProgressRing은 작은 고정 고리,AnimatedRing은 나타날 때 0%에서 값까지 채워지는 큰 고리다.