선택 · SINCE v0.1.0
SelectionIndicator — 선택 여부를 토큰 색상으로 보여주는 SelectionIndicator
16·18·20·24 크기와 사용자 지정 체크 마크를 지원하는 원형 선택 표시 컴포넌트입니다.
SelectionIndicator 사용 시점과 역할
SelectionIndicator는 선택된 상태의 채운 원과 선택되지 않은 테두리 원을 렌더링합니다. Provider 체크 아이콘이 없으면 텍스트 글리프로 폴백하고, showUncheckedMark로 미선택 마크도 표시할 수 있습니다.
- 16, 18, 20, 24로 제한된 예측 가능한 크기 계약
- Provider icons.check 또는 renderMark 사용자 지정 슬롯
- selected와 showUncheckedMark를 분리한 시각 상태
설치와 최소 예제
SelectionIndicator: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { SelectionIndicator } from '@gj-kit/expo-ui';
<SelectionIndicator selected={selected} size={24} />접근성과 플랫폼 동작
이 컴포넌트는 시각적 표시 조각입니다. 실제 선택 역할과 selected 상태는 SelectableRow 같은 상호작용 컨테이너에서 제공해야 합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.