コンテキストメニュー

右クリックまたは長押しでトリガーされる、ポインターの位置に表示されるメニューです。

ここで右クリックしてください。

vue

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import {
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuItemIndicator,
  ContextMenuLabel,
  ContextMenuPortal,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from 'radix-vue'

const checkboxOne = ref(false)
const checkboxTwo = ref(false)
const person = ref('pedro')

function handleClick() {
  // eslint-disable-next-line no-alert
  alert('hello!')
}
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger
      as-child
      class="block border-2 border-white border-dashed text-white rounded text-[15px] select-none py-[45px] w-[300px] text-center"
    >
      <span> Right click here. </span>
    </ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent
        class="min-w-[220px] z-30 bg-white outline-none rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
        :side-offset="5"
      >
        <ContextMenuItem
          value="New Tab"
          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
          @click="handleClick"
        >
          New Tab <div
            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
          >
            ⌘+T
          </div>
        </ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger
            value="more toolsz"
            class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
          >
            More Tools <div
              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
            >
              <Icon icon="radix-icons:chevron-right" />
            </div>
          </ContextMenuSubTrigger>
          <ContextMenuPortal>
            <ContextMenuSubContent
              class="min-w-[220px] z-30 outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
              :side-offset="2"
              :align-offset="-5"
            >
              <ContextMenuItem
                class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Save Page As… <div
                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                >
                  ⌘+S
                </div>
              </ContextMenuItem>
              <ContextMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Create Shortcut…
              </ContextMenuItem>
              <ContextMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Name Window…
              </ContextMenuItem>
              <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
              <ContextMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Developer Tools
              </ContextMenuItem>
            </ContextMenuSubContent>
          </ContextMenuPortal>
        </ContextMenuSub>
        <ContextMenuItem
          value="New Window"
          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
        >
          New Window <div
            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
          >
            ⌘+N
          </div>
        </ContextMenuItem>
        <ContextMenuItem
          value="New Private Window"
          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
          disabled
        >
          New Private Window <div
            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
          >
            ⇧+⌘+N
          </div>
        </ContextMenuItem>
        <ContextMenuSub>
          <ContextMenuSubTrigger
            value="more tools"
            class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
          >
            More Tools <div
              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
            >
              <Icon icon="radix-icons:chevron-right" />
            </div>
          </ContextMenuSubTrigger>
          <ContextMenuPortal>
            <ContextMenuSubContent
              class="min-w-[220px] z-30 outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
              :side-offset="2"
              :align-offset="-5"
            >
              <ContextMenuItem
                class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Save Page As… <div
                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                >
                  ⌘+S
                </div>
              </ContextMenuItem>
              <ContextMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Create Shortcut…
              </ContextMenuItem>
              <ContextMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Name Window…
              </ContextMenuItem>
              <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
              <ContextMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Developer Tools
              </ContextMenuItem>
              <ContextMenuSub>
                <ContextMenuSubTrigger
                  value="more toolsz"
                  class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
                >
                  More Tools <div
                    class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                  >
                    <Icon icon="radix-icons:chevron-right" />
                  </div>
                </ContextMenuSubTrigger>
                <ContextMenuPortal>
                  <ContextMenuSubContent
                    class="min-w-[220px] z-30 outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
                    :side-offset="2"
                    :align-offset="-5"
                  >
                    <ContextMenuItem
                      class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                    >
                      Save Page As… <div
                        class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                      >
                        ⌘+S
                      </div>
                    </ContextMenuItem>
                    <ContextMenuItem
                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                    >
                      Create Shortcut…
                    </ContextMenuItem>
                    <ContextMenuItem
                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                    >
                      Name Window…
                    </ContextMenuItem>
                    <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
                    <ContextMenuItem
                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                    >
                      Developer Tools
                    </ContextMenuItem>
                    <ContextMenuSub>
                      <ContextMenuSubTrigger
                        value="more toolsz"
                        class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
                      >
                        More Tools <div
                          class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                        >
                          <Icon icon="radix-icons:chevron-right" />
                        </div>
                      </ContextMenuSubTrigger>
                      <ContextMenuPortal>
                        <ContextMenuSubContent
                          class="min-w-[220px] z-30 outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
                          :side-offset="2"
                          :align-offset="-5"
                        >
                          <ContextMenuItem
                            class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                          >
                            Save Page As… <div
                              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                            >
                              ⌘+S
                            </div>
                          </ContextMenuItem>
                          <ContextMenuItem
                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                          >
                            Create Shortcut…
                          </ContextMenuItem>
                          <ContextMenuItem
                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                          >
                            Name Window…
                          </ContextMenuItem>
                          <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
                          <ContextMenuItem
                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                          >
                            Developer Tools
                          </ContextMenuItem>
                        </ContextMenuSubContent>
                      </ContextMenuPortal>
                    </ContextMenuSub>
                  </ContextMenuSubContent>
                </ContextMenuPortal>
              </ContextMenuSub>
              <ContextMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Developer Tools
              </ContextMenuItem>
            </ContextMenuSubContent>
          </ContextMenuPortal>
        </ContextMenuSub>
        <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
        <ContextMenuCheckboxItem
          v-model="checkboxOne"
          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
        >
          <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
            <Icon icon="radix-icons:check" />
          </ContextMenuItemIndicator> Show Bookmarks <div
            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
          >
            ⌘+B
          </div>
        </ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem
          v-model="checkboxTwo"
          class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
        >
          <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
            <Icon icon="radix-icons:check" />
          </ContextMenuItemIndicator> Show Full URLs
        </ContextMenuCheckboxItem>
        <ContextMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
        <ContextMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve11">
          People
        </ContextMenuLabel>
        <ContextMenuRadioGroup v-model="person">
          <ContextMenuRadioItem
            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
            value="pedro"
          >
            <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
              <Icon icon="radix-icons:dot-filled" />
            </ContextMenuItemIndicator> Pedro Duarte
          </ContextMenuRadioItem>
          <ContextMenuRadioItem
            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
            value="colm"
          >
            <ContextMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
              <Icon icon="radix-icons:dot-filled" />
            </ContextMenuItemIndicator> Colm Tuite
          </ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

機能

設定可能な読み取り方向を持つサブメニューをサポートします。
項目、ラベル、項目のグループをサポートします。
オプションの不確定状態を持つ、チェック可能な項目（シングルまたは複数）をサポートします。
モーダルモードと非モーダルモードをサポートします。
サイド、配置、オフセット、衝突処理をカスタマイズできます。
フォーカスは完全に管理されています。
フルキーボードナビゲーション。
タイプヘッドサポート。
閉じ方とレイヤーの動作は高度にカスタマイズ可能です。
タッチデバイスでは長押しでトリガーされます

インストール

コマンドラインからコンポーネントをインストールします。

$ npm add radix-vue

構成

すべての部品をインポートして組み立てます。

vue

<script setup lang="ts">
import {
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuItemIndicator,
  ContextMenuLabel,
  ContextMenuPortal,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger />

    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuLabel />
        <ContextMenuItem />

        <ContextMenuGroup>
          <ContextMenuItem />
        </ContextMenuGroup>

        <ContextMenuCheckboxItem>
          <ContextMenuItemIndicator />
        </ContextMenuCheckboxItem>

        <ContextMenuRadioGroup>
          <ContextMenuRadioItem>
            <ContextMenuItemIndicator />
          </ContextMenuRadioItem>
        </ContextMenuRadioGroup>

        <ContextMenuSub>
          <ContextMenuSubTrigger />
          <ContextMenuPortal>
            <ContextMenuSubContent />
          </ContextMenuPortal>
        </ContextMenuSub>

        <ContextMenuSeparator />
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

APIリファレンス

メニューWAI-ARIAデザインパターンに準拠し、ロービングタブインデックスを使用してメニュー項目間のフォーカス移動を管理します。

ルート

コンテキストメニューのすべての部品を含みます。

プロパティ	デフォルト値	型
`dir`		`'ltr' \| 'rtl'` 該当する場合のコンボボックスの読み取り方向。省略した場合、`ConfigProvider`からグローバルに継承するか、LTR（左から右）の読み取りモードを想定します。
`modal`	`true`	`boolean` ドロップダウンメニューのモーダル性。 `true`に設定すると、外部要素とのインタラクションが無効になり、スクリーンリーダーにはメニューコンテンツのみが表示されます。

イベント	ペイロード
`update:open`	`[payload: boolean]` サブメニューのオープン状態が変更されたときに呼び出されるイベントハンドラー。

トリガー

コンテキストメニューを開く領域。右クリック（または関連するキーボードショートカットを使用）してコンテキストメニューを開きたいターゲットの周りにラップします。

プロパティ	デフォルト値	型
`as`	`'span'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。
`disabled`	`false`	`boolean` `true`の場合、右クリックしてもコンテキストメニューは開きません。これにより、ネイティブのコンテキストメニューも復元されることに注意してください。

データ属性	値
`[data-state]`	`"open" \| "closed"`

ポータル

使用すると、コンテンツ部分を`body`にポータルします。

プロパティ	デフォルト値	型
`disabled`		`boolean` テレポートを無効にして、コンポーネントをインラインでレンダリングします。 reference
`forceMount`		`boolean` より多くの制御が必要な場合にマウントを強制するために使用します。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。
`to`		`string \| HTMLElement` Vueネイティブのテレポートコンポーネントのプロパティ`:to` reference

コンテンツ

コンテキストメニューが開いているときにポップアップ表示されるコンポーネント。

プロパティ	デフォルト値	型
`alignOffset`	`0`	`number` `start`または`end`の配置オプションからのピクセル単位のオフセット。
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。
`avoidCollisions`	`true`	`boolean` `true`の場合、境界エッジとの衝突を防ぐために、サイドと配置の設定を上書きします。
`collisionBoundary`	`[]`	`Element \| (Element \| null)[] \| null` 衝突境界として使用される要素。デフォルトではビューポートですが、このチェックに含める追加の要素を提供できます。
`collisionPadding`	`0`	`number \| Partial<Record<'top' \| 'right' \| 'bottom' \| 'left', number>>` 衝突検出が発生する境界エッジからのピクセル単位の距離。数値（すべての辺で同じ）、または部分的なパディングオブジェクト（例：{ top: 20, left: 20 }）を受け入れます。
`forceMount`		`boolean` より多くの制御が必要な場合にマウントを強制するために使用します。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。
`hideWhenDetached`	`false`	`boolean` トリガーが完全に隠されたときにコンテンツを隠すかどうか。
`loop`		`boolean` `true`の場合、キーボードナビゲーションは最後の項目から最初の項目へ、そしてその逆にループします。
`prioritizePosition`		`boolean` コンテンツをビューポート内に配置することを強制します。参照要素と重なる可能性があり、望ましくない場合があります。
`sticky`	`'partial'`	`'partial' \| 'always'` 配置軸のスティッキーな動作。`partial`は、トリガーが少なくとも部分的に境界内にある限り、コンテンツを境界内に維持します。一方、「always」は、トリガーが境界内にあるかどうかに関係なく、コンテンツを境界内に維持します。

イベント	ペイロード
`closeAutoFocus`	`[event: Event]` 閉じるときに自動フォーカス時に呼び出されるイベントハンドラー。防止できます。
`escapeKeyDown`	`[event: KeyboardEvent]` Escapeキーを押したときに呼び出されるイベントハンドラー。防止できます。
`focusOutside`	`[event: FocusOutsideEvent]` `DismissableLayer`の外にフォーカスが移動したときに呼び出されるイベントハンドラー。防止できます。
`interactOutside`	`[event: PointerDownOutsideEvent \| FocusOutsideEvent]` `DismissableLayer`の外でインタラクションが発生したときに呼び出されるイベントハンドラー。具体的には、外側で`pointerdown`イベントが発生した場合、またはその外にフォーカスが移動した場合です。防止できます。
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` `DismissableLayer`の外側で`pointerdown`イベントが発生したときに呼び出されるイベントハンドラー。防止できます。

データ属性	値
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-align]`	`"start" \| "end" \| "center"`

CSS変数	説明
`--radix-context-menu-content-transform-origin`	コンテンツと矢印の位置/オフセットから計算された`transform-origin`。
`--radix-context-menu-content-available-width`	トリガーと境界エッジ間の残りの幅。
`--radix-context-menu-content-available-height`	トリガーと境界エッジ間の残りの高さ。
`--radix-context-menu-trigger-width`	トリガーの幅。
`--radix-context-menu-trigger-height`	トリガーの高さ。

矢印

サブメニューと共にレンダリングするためのオプションの矢印要素。トリガー項目と`ContextMenu.Content`を視覚的にリンクするために使用できます。`ContextMenu.Content`内にレンダリングする必要があります。

プロパティ	デフォルト値	型
`as`	`'svg'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。
`height`	`5`	`number` 矢印の高さをピクセル単位で指定します。
`width`	`10`	`number` 矢印の幅をピクセル単位で指定します。

項目

コンテキストメニュー項目を含むコンポーネント。

プロパティ	デフォルト値	型
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。
`disabled`		`boolean` `true`の場合、ユーザーが項目とインタラクトすることを防ぎます。
`textValue`		`string` タイプヘッド目的で使用されるオプションのテキスト。デフォルトでは、タイプヘッドの動作は項目の`.textContent`を使用します。コンテンツが複雑な場合、または内部にテキスト以外のコンテンツがある場合に使用します。

イベント	ペイロード
`select`	`[event: Event]` ユーザーが項目を選択したときに呼び出されるイベントハンドラー（マウスまたはキーボードを使用）。このハンドラーで`event.preventDefault`を呼び出すと、その項目を選択したときにメニューが閉じることがなくなります。

データ属性	値
`[data-highlighted]`	強調表示されている場合に表示されます。
`[data-disabled]`	無効になっている場合に表示されます。

グループ

複数のContextMenu.Itemをグループ化するために使用されます。

プロパティ	デフォルト値	型
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。

ラベル

ラベルのレンダリングに使用されます。矢印キーではフォーカスできません。

プロパティ	デフォルト値	型
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。

CheckboxItem

チェックボックスのように制御およびレンダリングできる項目です。

プロパティ	デフォルト値	型
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。
`checked`		`false \| true \| 'indeterminate'` 項目の制御されたチェック状態です。`v-model:checked`として使用できます。
`disabled`		`boolean` `true`の場合、ユーザーが項目とインタラクトすることを防ぎます。
`textValue`		`string` タイプヘッド目的で使用されるオプションのテキスト。デフォルトでは、タイプヘッドの動作は項目の`.textContent`を使用します。コンテンツが複雑な場合、または内部にテキスト以外のコンテンツがある場合に使用します。

イベント	ペイロード
`select`	`[event: Event]` ユーザーが項目を選択したときに呼び出されるイベントハンドラー（マウスまたはキーボードを使用）。このハンドラーで`event.preventDefault`を呼び出すと、その項目を選択したときにメニューが閉じることがなくなります。
`update:checked`	`[payload: boolean]` チェック状態が変更されたときに呼び出されるイベントハンドラーです。

データ属性	値
`[data-state]`	`"checked" \| "unchecked" \| "indeterminate"`
`[data-highlighted]`	強調表示されている場合に表示されます。
`[data-disabled]`	無効になっている場合に表示されます。

RadioGroup

複数のContextMenu.RadioItemをグループ化するために使用されます。

プロパティ	デフォルト値	型
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。
`modelValue`		`string` グループ内で選択された項目の値です。

イベント	ペイロード
`update:modelValue`	`[payload: string]` 値が変更されたときに呼び出されるイベントハンドラーです。

RadioItem

ラジオボタンのように制御およびレンダリングできる項目です。

プロパティ	デフォルト値	型
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。
`disabled`		`boolean` `true`の場合、ユーザーが項目とインタラクトすることを防ぎます。
`textValue`		`string` タイプヘッド目的で使用されるオプションのテキスト。デフォルトでは、タイプヘッドの動作は項目の`.textContent`を使用します。コンテンツが複雑な場合、または内部にテキスト以外のコンテンツがある場合に使用します。
`value*`		`string` 項目の一意の値です。

イベント	ペイロード
`select`	`[event: Event]` ユーザーが項目を選択したときに呼び出されるイベントハンドラー（マウスまたはキーボードを使用）。このハンドラーで`event.preventDefault`を呼び出すと、その項目を選択したときにメニューが閉じることがなくなります。

データ属性	値
`[data-state]`	`"checked" \| "unchecked" \| "indeterminate"`
`[data-highlighted]`	強調表示されている場合に表示されます。
`[data-disabled]`	無効になっている場合に表示されます。

ItemIndicator

親のContextMenu.CheckboxItemまたはContextMenu.RadioItemがチェックされている場合にレンダリングされます。この要素を直接スタイル設定したり、アイコンを配置するためのラッパーとして使用したり、両方を使用したりできます。

プロパティ	デフォルト値	型
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。
`forceMount`		`boolean` より多くの制御が必要な場合にマウントを強制するために使用します。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。

データ属性	値
`[data-state]`	`"checked" \| "unchecked" \| "indeterminate"`

Separator

コンテキストメニュー内の項目を視覚的に区切るために使用されます。

プロパティ	デフォルト値	型
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。

Sub

サブメニューのすべての部分を格納します。

プロパティ	デフォルト値	型
`defaultOpen`		`boolean` 最初にレンダリングされるときのサブメニューの開閉状態です。開閉状態を制御する必要がない場合に使用します。
`open`		`boolean` メニューの制御された開閉状態です。`v-model:open`として使用できます。

イベント	ペイロード
`update:open`	`[payload: boolean]` サブメニューのオープン状態が変更されたときに呼び出されるイベントハンドラー。

スロット (default)	ペイロード
`open`	`boolean` 現在の開閉状態

SubTrigger

サブメニューを開く項目です。ContextMenu.Sub内にレンダリングする必要があります。

プロパティ	デフォルト値	型
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。
`disabled`		`boolean` `true`の場合、ユーザーが項目とインタラクトすることを防ぎます。
`textValue`		`string` タイプヘッド目的で使用されるオプションのテキスト。デフォルトでは、タイプヘッドの動作は項目の`.textContent`を使用します。コンテンツが複雑な場合、または内部にテキスト以外のコンテンツがある場合に使用します。

データ属性	値
`[data-state]`	`"open" \| "closed"`
`[data-highlighted]`	強調表示されている場合に表示されます。
`[data-disabled]`	無効になっている場合に表示されます。

SubContent

サブメニューが開いているときに表示されるコンポーネントです。ContextMenu.Sub内にレンダリングする必要があります。

プロパティ	デフォルト値	型
`alignOffset`		`number` `start`または`end`の配置オプションからのピクセル単位のオフセット。
`arrowPadding`		`number` 矢印とコンテンツの端の間のパディングです。コンテンツにborder-radiusがある場合、これにより角がオーバーフローするのを防ぎます。
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対してデフォルトでレンダリングされる要素を変更し、そのプロパティと動作をマージします。詳細は、コンポジションガイドをご覧ください。
`avoidCollisions`		`boolean` `true`の場合、境界エッジとの衝突を防ぐために、サイドと配置の設定を上書きします。
`collisionBoundary`		`Element \| (Element \| null)[] \| null` 衝突境界として使用される要素。デフォルトではビューポートですが、このチェックに含める追加の要素を提供できます。
`collisionPadding`		`number \| Partial<Record<'top' \| 'right' \| 'bottom' \| 'left', number>>` 衝突検出が発生する境界エッジからのピクセル単位の距離。数値（すべての辺で同じ）、または部分的なパディングオブジェクト（例：{ top: 20, left: 20 }）を受け入れます。
`forceMount`		`boolean` より多くの制御が必要な場合にマウントを強制するために使用します。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。
`hideWhenDetached`		`boolean` トリガーが完全に隠されたときにコンテンツを隠すかどうか。
`loop`		`boolean` `true`の場合、キーボードナビゲーションは最後の項目から最初の項目へ、そしてその逆にループします。
`prioritizePosition`		`boolean` コンテンツをビューポート内に配置することを強制します。参照要素と重なる可能性があり、望ましくない場合があります。
`sideOffset`		`number` トリガーからのピクセル単位の距離です。
`sticky`		`'partial' \| 'always'` 配置軸のスティッキーな動作。`partial`は、トリガーが少なくとも部分的に境界内にある限り、コンテンツを境界内に維持します。一方、「always」は、トリガーが境界内にあるかどうかに関係なく、コンテンツを境界内に維持します。
`updatePositionStrategy`		`'always' \| 'optimized'` すべてのアニメーションフレームでフローティング要素の位置を更新するための戦略です。

イベント	ペイロード
`closeAutoFocus`	`[event: Event]` 閉じるときに自動フォーカス時に呼び出されるイベントハンドラー。防止できます。
`entryFocus`	`[event: Event]`
`escapeKeyDown`	`[event: KeyboardEvent]` Escapeキーを押したときに呼び出されるイベントハンドラー。防止できます。
`focusOutside`	`[event: FocusOutsideEvent]` `DismissableLayer`の外にフォーカスが移動したときに呼び出されるイベントハンドラー。防止できます。
`interactOutside`	`[event: PointerDownOutsideEvent \| FocusOutsideEvent]` `DismissableLayer`の外でインタラクションが発生したときに呼び出されるイベントハンドラー。具体的には、外側で`pointerdown`イベントが発生した場合、またはその外にフォーカスが移動した場合です。防止できます。
`openAutoFocus`	`[event: Event]` 開いているときに自動フォーカスされる際に呼び出されるイベントハンドラーです。キャンセルできます。
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` `DismissableLayer`の外側で`pointerdown`イベントが発生したときに呼び出されるイベントハンドラー。防止できます。

データ属性	値
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-align]`	`"start" \| "end" \| "center"`

CSS変数	説明
`--radix-context-menu-content-transform-origin`	コンテンツと矢印の位置/オフセットから計算された`transform-origin`。
`--radix-context-menu-content-available-width`	トリガーと境界エッジ間の残りの幅。
`--radix-context-menu-content-available-height`	トリガーと境界エッジ間の残りの高さ。
`--radix-context-menu-trigger-width`	トリガーの幅。
`--radix-context-menu-trigger-height`	トリガーの高さ。

例

サブメニュー付き

ContextMenuSubとそのパーツを組み合わせてサブメニューを作成できます。

vue

<script setup lang="ts">
import {
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuPortal,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>Sub menu →</ContextMenuSubTrigger>
          <ContextMenuPortal>
            <ContextMenuSubContent>
              <ContextMenuItem>Sub menu item</ContextMenuItem>
              <ContextMenuItem>Sub menu item</ContextMenuItem>
              <ContextMenuArrow />
            </ContextMenuSubContent>
          </ContextMenuPortal>
        </ContextMenuSub>
        <ContextMenuSeparator />
        <ContextMenuItem>…</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

無効な項目付き

data-disabled属性を使用して、無効な項目に特別なスタイルを追加できます。

vue

<script setup lang="ts">
import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem
          class="ContextMenuItem"
          disabled
        >
          …
        </ContextMenuItem>
        <ContextMenuItem class="ContextMenuItem">
          …
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

css

/* styles.css */
.ContextMenuItem[data-disabled] {
  color: gainsboro;
}

セパレータ付き

Separatorパーツを使用して、項目間にセパレータを追加します。

vue

<script setup lang="ts">
import {
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuPortal,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>…</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

ラベル付き

Labelパーツを使用して、セクションにラベルを付けます。

vue

<script setup lang="ts">
import {
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuPortal,
  ContextMenuRoot,
  ContextMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuLabel>Label</ContextMenuLabel>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuItem>…</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

チェックボックス項目付き

CheckboxItemパーツを使用して、チェックできる項目を追加します。

vue

<script setup lang="ts">
import {
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuItemIndicator,
  ContextMenuPortal,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from 'radix-vue'
import { Icon } from '@iconify/vue'

const checked = ref(true)
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuItem>…</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem v-model="checked">
          <ContextMenuItemIndicator>
            <Icon icon="radix-icons:check" />
          </ContextMenuItemIndicator>
          Checkbox item
        </ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

ラジオボタン項目付き

RadioGroupとRadioItemパーツを使用して、他の項目の中からチェックできる項目を追加します。

vue

<script setup lang="ts">
import {
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuItemIndicator,
  ContextMenuPortal,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuRoot,
  ContextMenuSeparator,
  ContextMenuTrigger,
} from 'radix-vue'
import { Icon } from '@iconify/vue'

const color = ref('blue')
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuRadioGroup v-model="color">
          <ContextMenuRadioItem value="red">
            <ContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </ContextMenuItemIndicator>
            Red
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="blue">
            <ContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </ContextMenuItemIndicator>
            Blue
          </ContextMenuRadioItem>
          <ContextMenuRadioItem value="green">
            <ContextMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </ContextMenuItemIndicator>
            Green
          </ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

複雑な項目付き

Itemパーツに画像などの追加の装飾要素を追加できます。

vue

<script setup lang="ts">
import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent>
        <ContextMenuItem>
          <img src="…">
          Adolfo Hess
        </ContextMenuItem>
        <ContextMenuItem>
          <img src="…">
          Miyah Myles
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

コンテンツ/サブコンテンツのサイズを制限する

コンテンツ（またはサブコンテンツ）の幅をトリガー（またはサブトリガー）の幅に合わせるように制限したり、高さをビューポートを超えないように制限したりする場合があります。

これをサポートするために、--radix-context-menu-trigger-widthや--radix-context-menu-content-available-heightなどのいくつかのCSSカスタムプロパティを公開しています。これらを使用してコンテンツのサイズを制限します。

vue

<script setup lang="ts">
import { ContextMenuContent, ContextMenuItem, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent class="ContextMenuContent">
        …
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

css

/* styles.css */
.ContextMenuContent {
  width: var(--radix-context-menu-trigger-width);
  max-height: var(--radix-context-menu-content-available-height);
}

起点認識アニメーション

CSSカスタムプロパティ--radix-context-menu-content-transform-originを公開しています。これを用いて、`side`、`sideOffset`、`align`、`alignOffset`、および衝突に基づいて計算された起点からコンテンツをアニメーション化します。

vue

<script setup lang="ts">
import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent class="ContextMenuContent">
        …
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

css

/* styles.css */
.ContextMenuContent {
  transform-origin: var(--radix-context-menu-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

衝突認識アニメーション

data-side属性とdata-align属性を公開しています。これらの値は実行時に変更され、衝突を反映します。これらを使用して、衝突と方向を認識するアニメーションを作成します。

vue

<script setup lang="ts">
import { ContextMenuContent, ContextMenuPortal, ContextMenuRoot, ContextMenuTrigger } from 'radix-vue'
</script>

<template>
  <ContextMenuRoot>
    <ContextMenuTrigger>…</ContextMenuTrigger>
    <ContextMenuPortal>
      <ContextMenuContent class="ContextMenuContent">
        …
      </ContextMenuContent>
    </ContextMenuPortal>
  </ContextMenuRoot>
</template>

css

/* styles.css */
.ContextMenuContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.ContextMenuContent[data-side="top"] {
  animation-name: slideUp;
}
.ContextMenuContent[data-side="bottom"] {
  animation-name: slideDown;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

アクセシビリティ

ロービングtabIndexを使用して、メニュー項目間のフォーカス移動を管理します。

キーボード操作

キー	説明
`Space`	フォーカスされている項目をアクティブにします。
`Enter`	フォーカスされている項目をアクティブにします。
`ArrowDown`	フォーカスを次の項目に移動します。
`ArrowUp`	フォーカスを前の項目に移動します。
`ArrowRightArrowLeft`	フォーカスが`ContextMenu.SubTrigger`にある場合、読み取り方向に応じてサブメニューを開いたり閉じたりします。
`Esc`	コンテキストメニューを閉じます。

コンテキストメニュー ​

機能 ​

インストール ​

構成 ​

APIリファレンス ​

ルート ​

トリガー ​

ポータル ​

コンテンツ ​

矢印 ​

項目 ​

グループ ​

ラベル ​

CheckboxItem ​

RadioGroup ​

RadioItem ​

ItemIndicator ​

Separator ​

Sub ​

SubTrigger ​

SubContent ​

例 ​

サブメニュー付き ​

無効な項目付き ​

セパレータ付き ​

ラベル付き ​

チェックボックス項目付き ​

ラジオボタン項目付き ​

複雑な項目付き ​

コンテンツ/サブコンテンツのサイズを制限する ​

起点認識アニメーション ​

衝突認識アニメーション ​

アクセシビリティ ​

キーボード操作 ​