진행 · SINCE v0.3.0
ProgressBar — 수치형과 indeterminate 작업을 모두 표현하는 ProgressBar
value와 max 기반 진행률, 알 수 없는 진행 상태, 모션 감소와 접근성 값을 지원하는 React Native ProgressBar입니다.
ProgressBar 사용 시점과 역할
ProgressBar는 숫자 value를 0에서 max 사이로 정규화하고 value null이면 이동 세그먼트를 표시합니다. primary, info, success, warning, error 상태와 세 가지 높이를 제공하며 indeterminate 모드에서는 max를 받을 수 없습니다.
- determinate 숫자 값과 indeterminate null 모드를 타입으로 분리
- primary, info, success, warning, error 트랙·인디케이터
- 운영체제 모션 감소 설정에서 이동 애니메이션 중단
설치와 최소 예제
ProgressBar: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { ProgressBar } from '@gj-kit/expo-ui';
<ProgressBar accessibilityLabel="사진 업로드" accessibilityValueText="10장 중 7장" value={7} max={10} />접근성과 플랫폼 동작
필수 accessibilityLabel과 progressbar 역할을 제공합니다. 수치형은 min·max·now를, indeterminate는 busy 상태를 노출하며 accessibilityValueText로 '10장 중 7장' 같은 맥락을 전달할 수 있습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.