탐색 · SINCE v0.3.0
Accordion — 단일·복수 펼침을 타입으로 분리한 Accordion
controlled single·multiple 모드와 헤더·패널 ARIA 관계, 키보드 상호작용을 제공하는 Expo·React Native Accordion입니다.
Accordion 사용 시점과 역할
Accordion은 각 항목의 title, description, content, leading, disabled를 받아 disclosure 목록을 만듭니다. single은 T 또는 null, multiple은 readonly T 배열을 사용하며 collapsible은 single 모드에서만 허용합니다.
- single과 multiple 상태 계약을 구분하는 제네릭 타입
- Provider chevron, 텍스트 폴백 또는 renderIndicator 슬롯
- headingLevel과 항목·헤더·콘텐츠 스타일 사용자 지정
설치와 최소 예제
Accordion: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Accordion } from '@gj-kit/expo-ui';
<Accordion items={items} value={openItem} onValueChange={setOpenItem} headingLevel={2} />접근성과 플랫폼 동작
웹에서 heading, button, aria-expanded, aria-controls와 패널 관계를 제공하고 Enter·Space로 동작합니다. 네이티브는 expanded·disabled 상태와 설명 hint를 접근성 API로 전달합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.