Context Menu

Newv0.3.0

右クリックで表示されるコンテキストメニュー。ファイル操作や編集アクションなどに使用します。

基本的な使い方

右クリックでメニューを表示

右クリックしてください

tsx

class="token keyword">import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">ContextMenu>
  <class="token tag">div q:slot=class="token keyword">class="token string">"trigger">
    <class="token tag">div>右クリックしてください</class="token tag">div>
  </class="token tag">div>
  <class="token tag">ContextMenuContent>
    <class="token tag">ContextMenuItem>
      戻る
      <class="token tag">ContextMenuShortcut>⌘[</class="token tag">ContextMenuShortcut>
    </class="token tag">ContextMenuItem>
    <class="token tag">ContextMenuItem>再読み込み</class="token tag">ContextMenuItem>
    <class="token tag">ContextMenuSeparator />
    <class="token tag">ContextMenuItem>ページのソースを表示</class="token tag">ContextMenuItem>
  </class="token tag">ContextMenuContent>
</class="token tag">ContextMenu>

ファイルマネージャー

ファイル操作用のコンテキストメニュー

document.pdf

2.4 MB

このファイルを右クリック

テキストエディター

テキスト編集用のコンテキストメニュー

これはサンプルテキストです。このテキストエリアを右クリックすると、編集用のコンテキストメニューが表示されます。

Props API

Prop	Type	Default	Description
`onSelect$`	`(value: string) => void`	-	アイテム選択時のコールバック（ContextMenuItem）
`disabled`	`boolean`	`false`	無効状態（ContextMenuItem）

Accessibility

右クリック（またはShift+F10）でメニューを開く
上下矢印キーでアイテム間を移動
Enter/Space キーでアイテムを選択
Escape キーでメニューを閉じる
role='menu' と role='menuitem' を使用