행동과 오버레이@neumorphism-ui/context-menu

Context Menu

Base UI Context Menu의 포인터 anchoring과 키보드 탐색을 유지하면서 팝업을 floating 뉴모피즘 표면으로 표현합니다. 일반 항목, 체크·라디오 항목, 하위 메뉴와 destructive 상태를 조합할 수 있습니다.

@neumorphism-ui/context-menu

Registry JSON

미리보기

문서 도구

저장된 상태

설치

npx shadcn@latest add @neumorphism-ui/context-menu

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

"use client";
import * as React from "react";
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuShortcut,
  ContextMenuTrigger,
} from "@/components/ui/context-menu";

Example

export default function Example() {
  const [details, setDetails] = React.useState(true);
  const [message, setMessage] = React.useState("준비됨");
  return <div className="grid gap-3">
    <ContextMenu>
      <ContextMenuTrigger className="grid min-h-32 place-items-center rounded-[var(--neu-radius-surface)] border border-[var(--neu-edge)] bg-[var(--neu-surface)] p-6 [box-shadow:var(--neu-shadow-inset)]">
        마우스 오른쪽 버튼을 눌러 메뉴를 여세요
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuLabel>문서</ContextMenuLabel>
        <ContextMenuItem onClick={() => setMessage("복사했습니다")}>복사<ContextMenuShortcut>⌘C</ContextMenuShortcut></ContextMenuItem>
        <ContextMenuCheckboxItem checked={details} onCheckedChange={setDetails}>세부 정보 표시</ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
    <p role="status" className="text-sm text-[var(--muted-foreground)]">{message}</p>
  </div>;
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`ContextMenu`	`open / onOpenChange`	`boolean / (open: boolean) => void`	`—`	메뉴의 controlled 열림 상태를 관리합니다.
`ContextMenuContent`	`side / align / sideOffset`	`Positioner props`	`—`	포인터 기준 팝업 위치와 간격을 조절합니다.
`ContextMenuItem`	`disabled`	`boolean`	`false`	항목을 보이게 유지하면서 실행할 수 없게 합니다.
`ContextMenuCheckboxItem`	`checked / onCheckedChange`	`boolean / (checked: boolean) => void`	`—`	체크 가능한 메뉴 항목의 상태를 제어합니다.
`ContextMenuRadioGroup`	`value / onValueChange`	`string / (value: string) => void`	`—`	상호 배타적인 라디오 항목의 선택을 제어합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성