ContextMenu

@hua-labs/ui

v1.0.0

아이콘, 그룹, 라벨 및 다양한 아이템 변형을 지원하는 우클릭 메뉴 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuLabel, ContextMenuGroup } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

기본 사용 (우클릭)

이 영역을 우클릭하세요

그룹과 라벨

Project Files

우클릭하여 옵션 보기

비활성화 아이템

우클릭 - 일부 비활성화

Props

이름	타입	기본값	설명
`trigger*`	`React.ReactNode`	-	우클릭 시 컨텍스트 메뉴를 여는 트리거 요소
`children*`	`React.ReactNode`	-	컨텍스트 메뉴 내용
`open`	`boolean`	-	제어 모드 열림 상태
`onOpenChange`	`(open: boolean) => void`	-	열림 상태 변경 콜백
`disabled`	`boolean`	`false`	컨텍스트 메뉴 비활성화
`placement`	`"top" \| "bottom" \| "left" \| "right"`	-	Menu placement relative to trigger
`align`	`"start" \| "center" \| "end"`	-	Menu alignment
`offset`	`number`	-	Offset from trigger (pixels)

ContextMenuItem Props

Prop	Type	Default	설명
icon	React.ReactNode	-	docs:components.contextMenu.itemProps.icon
variant	"default" \| "destructive" \| "disabled"	"default"	docs:components.contextMenu.itemProps.variant
disabled	boolean	false	docs:components.contextMenu.itemProps.disabled

코드 예시

docs:common.basicUsagetsx

1// Via framework (recommended)
2import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from '@hua-labs/ui/interactive';
3// Or direct import
4// import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from '@hua-labs/ui/interactive';
5 
6<ContextMenu
7  trigger={
8    <div className="p-4 border rounded-lg">
9      Right-click here
10    </div>
11  }
12>
13  <ContextMenuItem icon={<Copy />}>Copy</ContextMenuItem>
14  <ContextMenuItem icon={<Scissors />}>Cut</ContextMenuItem>
15  <ContextMenuItem icon={<ClipboardText />}>Paste</ContextMenuItem>
16  <ContextMenuSeparator />
17  <ContextMenuItem icon={<Trash />} variant="destructive">
18    Delete
19  </ContextMenuItem>
20</ContextMenu>

docs:components.contextMenu.examples.groupsAndLabelstsx

1<ContextMenu trigger={<div>Right-click</div>}>
2  <ContextMenuLabel>Edit</ContextMenuLabel>
3  <ContextMenuGroup>
4    <ContextMenuItem icon={<Copy />}>Copy</ContextMenuItem>
5    <ContextMenuItem icon={<Pencil />}>Rename</ContextMenuItem>
6  </ContextMenuGroup>
7  <ContextMenuSeparator />
8  <ContextMenuLabel>Actions</ContextMenuLabel>
9  <ContextMenuGroup>
10    <ContextMenuItem icon={<Download />}>Download</ContextMenuItem>
11    <ContextMenuItem icon={<Trash />} variant="destructive">
12      Delete
13    </ContextMenuItem>
14  </ContextMenuGroup>
15</ContextMenu>

하위 컴포넌트

• ContextMenuItem - 메뉴 아이템
• ContextMenuSeparator - 구분선
• ContextMenuLabel - 라벨/헤더
• ContextMenuGroup - 아이템 그룹

접근성

•키보드 지원: Tab으로 탐색, Enter로 선택
•외부 클릭: 외부 클릭 시 메뉴 닫힘
•뷰포트 경계: 뷰포트 내에서 위치 자동 조정

Menu Command