Menu — typed action·checkbox와 플랫폼별 의미를 갖춘 Menu

웹 menuitem 키보드 탐색과 네이티브 adaptive action surface를 같은 리터럴 값 계약으로 제공하는 Expo·React Native Menu입니다.

v0.4.0 공개 예정

이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.

Menu 사용 시점과 역할

Menu<T>는 action과 controlled checkbox 항목만 받으며 items의 문자열 literal value를 onSelect 결과에 보존합니다. 웹에서는 실제 menu item으로 포커스를 옮겨 방향키·Home·End·typeahead를 처리하고, 네이티브에서는 작은 화면 하단·넓은 화면 중앙의 Dialog 기반 button·checkbox로 적응합니다. action은 기본적으로 닫히고 checkbox는 기본적으로 열린 채 연속 선택을 허용합니다.

action·checkbox 판별 유니언, NoInfer select details와 항목별 closeOnSelect
웹 roving focus, disabled skip, typeahead, outside·Escape·Tab·detached anchor 처리
네이티브 bottom·center action surface, safe cancel, Back·접근성 escape와 inset 합성

설치와 최소 예제

Menu: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.

TypeScript

pnpm add @gj-kit/expo-ui

import { Menu } from '@gj-kit/expo-ui';

<Menu triggerLabel="프로젝트 작업" items={menuItems} open={open} onOpenChange={(next) => setOpen(next)} onSelect={handleSelect} />

접근성과 플랫폼 동작

웹 trigger는 expanded·controls를 가진 이름 있는 button이고 content는 menu, 항목은 menuitem 또는 menuitemcheckbox입니다. 네이티브에서는 존재하지 않는 menu role을 주장하지 않고 action을 button, checkbox를 checkbox로 노출합니다. icon-only trigger는 triggerIcon과 이름이 필수이며 busy는 선택만 막고 dismissDisabled는 dismissal 경로를 막습니다. radio item과 submenu는 아직 지원하지 않습니다.

기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.

함께 사용하는 컴포넌트

Menu — typed action·checkbox와 플랫폼별 의미를 갖춘 Menu

Menu 사용 시점과 역할

설치와 최소 예제

접근성과 플랫폼 동작

함께 사용하는 컴포넌트

Select

ActionSheet

Dialog