컨텍스트 메뉴
같은 동작이 되풀이되는 대상(표 행 · 파일 · 메시지 · 칸반 카드)에 그 자리에서 여는 메뉴입니다. 항목 모양은 메뉴(DropdownMenu)와 같습니다.
컨텍스트 메뉴는 지름길이라 모든 항목이 대상의 보이는 ⋯ 메뉴에도 있어야 합니다. 항목 정의 하나(MenuItemDef)로 ⋯ 메뉴 · 오른쪽 클릭 메뉴 · 터치의 아래 시트를 함께 그려 이름과 순서가 갈리지 않게 합니다. 여러 개를 고른 채 열면 머리에 개수를 적고 고른 것 전부에 적용합니다. 하나에만 되는 동작은 비활성 + ‘하나만’ 입니다. radix-ui 가 필요합니다.
- import
- import { ContextMenu, ContextMenuTrigger, ContextMenuContent, MenuItems, type MenuItemDef } from "@uyoolabs/ui/menu";
- 쓰는 경우
- 표 행 · 파일 목록 · 메시지 · 칸반 카드처럼 같은 동작을 여러 대상에 되풀이할 때. 위험 항목은 개수를 이름에 넣습니다(‘작업 3개 삭제’).
- 쓰지 않는 경우
- ⋯ 메뉴에 없는 동작을 컨텍스트 메뉴에만 두지 않습니다. 편집 칸 · 고른 글자 위에서는 가로채지 않습니다(붙여 넣기 · 맞춤법). 대상이 하나뿐인 화면의 주 동작은 버튼으로 둡니다.
표 행
오른쪽 클릭 · Shift+F10 · 터치 길게 누르기. 행의 ⋯ 메뉴는 같은 정의로 그립니다.
| ID | 작업 | |
|---|---|---|
| PAY-142 | PG 웹훅 서명 검증 | |
| PAY-139 | 환불 정책 문구 검토 | |
| PAY-137 | 결제 실패 재시도 큐 |
행을 오른쪽 클릭하거나, 행에 포커스를 두고 Shift+F10
키보드 · 포인터
APG Menu 입니다. 대상에는 역할을 더하지 않습니다.
| 키 | 동작 |
|---|---|
| Shift+F10·메뉴 키 | 대상에 포커스가 있으면 연다. 대상의 시작 모서리에서, 첫 항목에 선다 |
| 오른쪽 클릭 | 누른 자리(메뉴의 왼쪽 위)에서 연다 |
| ↑·↓·Home·End | 항목 이동(비활성은 건너뛴다) |
| →·← | 하위 메뉴 열기 · 닫기 |
| Enter·Space | 실행. 체크 항목은 열어 둔 채 바꾼다 |
| 글자 | 그 글자로 시작하는 항목으로(조합 중이면 무시) |
| Esc·Tab | 닫고 대상으로 돌아간다 |
| 터치 500ms | 같은 항목 · 같은 순서의 아래 시트(대화상자). 닫으면 대상으로 |
| Shift+오른쪽 클릭 | 가로채지 않는다(브라우저 메뉴). 편집 칸 · 고른 글자 위도 같다 |
props
소스의 타입과 JSDoc 에서 생성한 표입니다. 컴포넌트를 고치면 pnpm gen 으로 다시 만듭니다.
ContextMenu
| prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
| longPress | boolean | { delay?: number; moveTolerance?: number } | true | 터치 길게 누르기를 아래 시트로 바꾼다(Content 에 items 가 있을 때). 기본 true — 500ms · 8px |
이 밖에 Radix ContextMenu.Root props를 그대로 받습니다.
ContextMenuContent
| prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
| heading | React.ReactNode | — | 머리. 여러 대상에 대한 메뉴면 ‘작업 3개’. 메뉴 이름(aria-label)에도 들어간다 |
| selection | { count: number; noun: string } | — | 고른 대상 수와 이름. 2 이상이면 머리를 labels.selectionHeading 으로 만들고 single 항목을 비활성으로 둔다 |
| items | readonly MenuItemDef[] | — | 항목 정의. 주면 메뉴를 이것으로 그리고, 터치 길게 누르기에 같은 항목의 아래 시트를 연다 |
| sheetTitle | React.ReactNode | — | 아래 시트의 제목(대상 이름). 없으면 머리 |
| lang | "ko" | "en" | "ja" | — | |
| labels | Partial<ContextMenuLabels> | — |
이 밖에 Radix ContextMenu.Content props를 그대로 받습니다.
ContextMenuItem
| prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
| inset | boolean | — | 체크 · 라디오 칸(16)만큼 들여 쓴다 |
| variant | "default" | "danger" | "default" | "danger" 는 빨강 글자, 강조되면 빨강 틴트 면 |
이 밖에 Radix ContextMenu.Item props를 그대로 받습니다.
MenuItems
| prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items필수 | readonly MenuItemDef[] | — | |
| as필수 | "dropdown" | "context" | "sheet" | — | 어디에 그리나. dropdown · context 는 그 메뉴의 Content 안에, sheet 는 아래 시트 본문에 |
| selectionCount | number | 1 | 고른 대상 수. 2 이상이면 single 항목을 비활성으로 둔다 |
| onSelected | () => void | — | sheet: 항목을 실행한 뒤(시트를 닫는다) |
| lang | "ko" | "en" | "ja" | — | |
| labels | Partial<ContextMenuLabels> | — |