레이아웃 · SINCE v0.3.0
Divider — 방향과 의미를 선택할 수 있는 Divider
가로·세로 선, 테마 색상, 두께, inset과 spacing을 제공하고 separator 의미를 선택적으로 노출하는 Divider입니다.
Divider 사용 시점과 역할
Divider는 기본적으로 장식용 hairline 구분선이며 horizontal과 vertical 방향을 지원합니다. color는 테마 역할, inset과 spacing은 spacing 키 또는 실측 숫자로 설정할 수 있습니다.
- horizontal·vertical 방향과 사용자 지정 thickness
- ThemeColors 키로 선택하는 선 색상
- inset과 인접 spacing을 독립적으로 설정
설치와 최소 예제
Divider: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Divider } from '@gj-kit/expo-ui';
<Divider orientation="horizontal" inset="md" spacing="sm" decorative={false} />접근성과 플랫폼 동작
기본 decorative true에서는 접근성 트리에서 숨깁니다. 실제 콘텐츠 구역의 경계를 전달해야 할 때 decorative false로 separator 역할과 웹 aria-orientation을 노출합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.