アクションとオーバーレイ@neumorphism-ui/context-menu

Context Menu

Base UI のポインターアンカーとキーボード操作を維持し、ポップアップを浮いたニューモーフィズム表面で表現します。通常項目、チェック、ラジオ、サブメニュー、破壊的操作を組み合わせられます。

@neumorphism-ui/context-menu

Registry JSON

プレビュー

文書ツール

保存済み

インストール

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

CLI が npm 依存関係、base token、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`	`—`	メニューの開閉状態を制御します。
`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 リファレンス

アクセシビリティ