ContextMenu

ContextMenu は、要素に関連するアクションを表示するためのオーバーレイ メニューを表示します。

インポート # 


import ContextMenu from 'primevue/contextmenu';

基本 #

ContextMenu は、メニュー項目のコレクションを model として必要とし、メニューを表示するために、ターゲットの contextmenu のようなイベントを使用して show メソッドを明示的に呼び出す必要があります。

Logo

<img alt="Logo" src="/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" />

ドキュメント #

グローバル プロパティを設定すると、コンテキスト メニューがドキュメントにアタッチされます。

このページの任意の場所を右クリックして、グローバル コンテキスト メニューを表示します。


<ContextMenu global :model="items" />

テンプレート #

ContextMenu は、モデルからのメニュー項目のインスタンスをパラメーターとして受け取る item テンプレートを使用して、項目のカスタマイズを提供します。


<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
    <li
        v-for="product in products"
        :key="product.id"
        :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
        @contextmenu="onRightClick($event, product.id)"
    >
        <div class="flex flex-wrap p-2 items-center gap-4">
            <img class="w-16 shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
            <div class="flex-1 flex flex-col gap-1">
                <span class="font-bold">{{ product.name }}</span>
                <div class="flex items-center gap-2">
                    <i class="pi pi-tag text-sm"></i>
                    <span>{{ product.category }}</span>
                </div>
            </div>
            <span class="font-bold ml-8">${{ product.price }}</span>
        </div>
    </li>
</ul>
<ContextMenu ref="menu" :model="items" @hide="selectedId = null">
    <template #item="{ item, props }">
        <a v-ripple class="flex items-center" v-bind="props.action">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
            <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
        </a>
    </template>
</ContextMenu>

コマンド #

command プロパティは、クリックまたはキー イベントによって項目がアクティブ化されたときに実行するコールバックを定義します。

  • エイミー・エルスナーエイミー・エルスナー
    管理者
  • アナ・ファリアナ・ファリ
    メンバー
  • アシヤ・ジャバヤントアシヤ・ジャバヤント
    メンバー
  • ベルナルド・ドミニクベルナルド・ドミニク
    ゲスト
  • エルウィン・シャービルエルウィン・シャービル
    メンバー

<ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
    <li
        v-for="user in users"
        :key="user.id"
        :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
        @contextmenu="onRightClick($event, user)"
    >
        <div class="flex flex-1 items-center gap-2">
            <img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" class="w-8 h-8" />
            <span class="font-bold">{{ user.name }}</span>
        </div>
        <Tag :value="user.role" :severity="getBadge(user)" />
    </li>
</ul>
<ContextMenu ref="menu" :model="items" @hide="selectedUser = null" />
<Toast />

ルーター #

ナビゲーション付きの項目は、ルーターリンクコンポーネント、外部リンク、またはプログラムによるナビゲーションを使用できるように、テンプレートを使用して定義されます。


<span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="..." fill="var(--p-primary-color)" />
        <path d="..." fill="var(--p-text-color)" />
    </svg>
</span>
<ContextMenu ref="routemenu" :model="items">
    <template #item="{ item, props }">
        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
                <span :class="item.icon" />
                <span class="ml-2">{{ item.label }}</span>
            </a>
        </router-link>
        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
        </a>
    </template>
</ContextMenu>

DataTable #

DataTable には ContextMenu の組み込みサポートがあります。例については、ContextMenu デモを参照してください。

アクセシビリティ #

スクリーンリーダー

ContextMenu コンポーネントは、aria-orientation が "vertical" に設定された menubar ロールを使用し、メニューを説明する値は、aria-labelledby または aria-label プロパティで提供できます。各リスト項目には、項目のラベルを参照する aria-label と、項目が無効になっている場合は定義される aria-disabled を持つ menuitem ロールがあります。ContextMenu 内のサブメニューは、サブメニューのルート メニュー項目のラベルの ID として定義された aria-labelledby を持つ menu ロールを使用します。さらに、サブメニューを開くメニュー項目には、項目とサブメニューの関係を定義するための aria-haspopup と aria-expanded があります。

キーボードサポート

キー機能
tabフォーカスがメニュー内にある場合、コンテキスト メニューを閉じ、ページの順序で次のフォーカス可能な要素にフォーカスを移動します。
enterメニュー項目にサブメニューがある場合、サブメニューの表示/非表示を切り替えます。それ以外の場合は、メニュー項目をアクティブ化し、開いているすべてのオーバーレイを閉じます。
spaceメニュー項目にサブメニューがある場合、サブメニューの表示/非表示を切り替えます。それ以外の場合は、メニュー項目をアクティブ化し、開いているすべてのオーバーレイを閉じます。
escapeコンテキスト メニューを閉じます。
下向き矢印フォーカスがメニュー内にない状態でメニューが開いている場合、最初の項目にフォーカスを追加します。項目に既にフォーカスがある場合は、サブメニュー内の次のメニュー項目にフォーカスを移動します。
上向き矢印フォーカスがメニュー内にない状態でメニューが開いている場合、最後の項目にフォーカスを追加します。項目に既にフォーカスがある場合は、サブメニュー内の次のメニュー項目にフォーカスを移動します。
右向き矢印利用可能な場合はサブメニューを開き、最初の項目にフォーカスを移動します。
左向き矢印サブメニューを閉じ、閉じたサブメニューのルート項目にフォーカスを移動します。
homeサブメニュー内の最初のメニュー項目にフォーカスを移動します。
endサブメニュー内の最後のメニュー項目にフォーカスを移動します。
任意の印刷可能な文字入力された文字で始まるラベルを持つメニュー項目にフォーカスを移動します。
PrimeVue 3 の PrimeVue 4.0.7 by PrimeTek