탐색 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
Collapsible — 독립적인 disclosure를 제어하는 Collapsible
필수 title과 content를 controlled open 상태, heading·expanded·controls 관계로 연결하는 Expo·React Native Collapsible입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
Collapsible 사용 시점과 역할
Collapsible은 여러 항목의 집합을 다루는 Accordion과 달리 독립적인 한 구역을 열고 닫습니다. 접근성 이름의 기준이 되는 문자열 title을 필수로 받고 plain·outlined 변형과 headingLevel을 제공합니다. 임의 trigger·leading·indicator 노드를 받지 않아 중첩 interactive 요소를 차단합니다.
- open과 onOpenChange를 사용하는 controlled disclosure
- 보이는 문자열 title을 필수로 요구하는 명확한 trigger 계약
- plain·outlined 변형, headingLevel과 trigger·content 스타일 사용자 지정
설치와 최소 예제
Collapsible: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Collapsible } from '@gj-kit/expo-ui';
<Collapsible title="고급 설정" open={open} onOpenChange={setOpen}>{settings}</Collapsible>접근성과 플랫폼 동작
필수 title이 trigger button의 접근성 이름이 됩니다. trigger는 heading 안에 렌더링되며 expanded·disabled 상태와 content의 controls 관계를 노출합니다. 닫힌 content는 화면과 접근성 트리에서 함께 숨겨 내부 포커스 요소가 탭 순서에 남지 않습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.