표시 · SINCE v0.3.0
ListItem — 정적 정보와 클릭 가능한 행을 구분하는 ListItem
title, description, leading, trailing과 세 가지 크기를 조합하고 정적·인터랙티브 계약을 타입으로 나누는 ListItem입니다.
ListItem 사용 시점과 역할
ListItem은 계정, 설정, 검색 결과 같은 반복 행의 정렬과 타이포그래피를 통일합니다. onPress가 있을 때만 버튼 행이 되며 정적 행에는 disabled나 접근성 힌트를 잘못 전달할 수 없습니다.
- title·description과 leading·trailing 슬롯
- sm, md, lg 크기별 최소 높이와 텍스트 역할
- onPress 유무로 정적 행과 버튼 행을 구분하는 타입 유니언
설치와 최소 예제
ListItem: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { ListItem } from '@gj-kit/expo-ui';
<ListItem title="김가람" description="garam@example.com" leading={<Avatar name="김가람" decorative />} onPress={openAccount} />접근성과 플랫폼 동작
인터랙티브 행은 button 역할과 disabled 상태를 노출하고 title을 기본 이름으로 사용합니다. description은 네이티브 hint와 웹 aria-describedby에 연결됩니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.