Vue MegaMenu コンポーネント

インポート #


import MegaMenu from 'primevue/megamenu';

基本 #

MegaMenuは、モデルとしてメニューアイテムのコレクションを必要とします。


<MegaMenu :model="items" />

垂直 #

MegaMenuのレイアウトは、水平と垂直のオプションを受け入れるorientationプロパティで設定されます。


<MegaMenu :model="items" orientation="vertical" />

テンプレート #

MegaMenuは、モデルからメニューアイテムインスタンスをパラメータとして受け取るitemテンプレートを使用して、アイテムのカスタマイズを提供します。メニューの前または後にコンテンツを埋め込むために、startとendという名前の追加スロットが提供されています。


<MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
    <template #start>
        <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
            <path d="..." fill="var(--p-primary-color)" />
            <path d="..." fill="var(--p-text-color)" />
        </svg>
    </template>
    <template #item="{ item }">
        <a v-if="item.root" v-ripple class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
        </a>
        <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
            <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                <i :class="[item.icon, 'text-lg']"></i>
            </span>
            <span class="inline-flex flex-col gap-1">
                <span class="font-bold text-lg">{{ item.label }}</span>
                <span class="whitespace-nowrap">{{ item.subtext }}</span>
            </span>
        </a>
        <div v-else class="flex flex-col items-start gap-4 p-2">
            <img alt="megamenu-demo" :src="item.image" class="w-full" />
            <span>{{ item.subtext }}</span>
            <Button :label="item.label" outlined />
        </div>
    </template>
    <template #end>
        <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
    </template>
</MegaMenu>

コマンド #

メニューアイテムのcommandプロパティは、アイテムをクリックまたはキーイベントでアクティブにしたときに実行するコールバックを定義します。


{
    label: 'Log out',
    icon: 'pi pi-signout',
    command: () => {
        // Callback to run
    }
}

ルーター #

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


<MegaMenu :model="items">
    <template #item="{ item }">
        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
            <a v-ripple :href="href" @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">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
        </a>
    </template>
</MegaMenu>

アクセシビリティ #

スクリーンリーダー

MegaMenuコンポーネントは、aria-orientationと共にmenubarロールを使用し、コンポーネントを記述する値は、aria-labelledbyまたはaria-labelプロップで提供できます。各リストアイテムには、アイテムのラベルを参照するaria-labelと、アイテムが無効な場合に定義されるaria-disabledを持つmenuitemロールがあります。MegaMenu内のサブメニューは、サブメニュールートメニューアイテムラベルのIDとして定義されたaria-labelledbyを持つmenuロールを使用します。さらに、サブメニューを開くルートメニューアイテムには、アイテムとサブメニューの関係を定義するaria-haspopupとaria-expandedがあります。

キーボードサポート

キー	機能
tab	フォーカスがメニューに移動すると、最初のアイテムにフォーカスを追加します。フォーカスが既にメニュー内にある場合、ページタブシーケンス内の次のフォーカス可能なアイテムにフォーカスが移動します。
shift + tab	フォーカスがメニューに移動すると、最初のアイテムにフォーカスを追加します。フォーカスが既にメニュー内にある場合、ページタブシーケンス内の前のフォーカス可能なアイテムにフォーカスが移動します。
enter	メニューアイテムにサブメニューがある場合、サブメニューの表示を切り替えます。そうでない場合、メニューアイテムをアクティブにし、開いているオーバーレイをすべて閉じます。
space	メニューアイテムにサブメニューがある場合、サブメニューの表示を切り替えます。そうでない場合、メニューアイテムをアクティブにし、開いているオーバーレイをすべて閉じます。
escape	フォーカスがポップアップサブメニュー内にある場合、サブメニューを閉じ、フォーカスを閉じたサブメニューのルートアイテムに移動します。
下矢印	フォーカスがルート要素にある場合、サブメニューを開き、フォーカスをサブメニューの最初の要素に移動します。そうでない場合、サブメニュー内の次のメニューアイテムにフォーカスを移動します。
上矢印	フォーカスがルート要素にある場合、サブメニューを開き、フォーカスをサブメニューの最後の要素に移動します。そうでない場合、サブメニュー内の前のメニューアイテムにフォーカスを移動します。
alt + 上矢印	フォーカスがポップアップメニュー内にある場合、フォーカスをサブメニューの最初の要素に移動します。そうでない場合、サブメニューを閉じ、水平モードで閉じたサブメニューのルートアイテムにフォーカスを移動します。
右矢印	フォーカスがルート要素にある場合、次のメニューアイテムにフォーカスを移動します。フォーカスがサブメニュー内にある場合、次のメニューグループの最初のメニューアイテムにフォーカスを移動します。
左矢印	フォーカスがルート要素にある場合、前のメニューアイテムにフォーカスを移動します。フォーカスがサブメニュー内にある場合、前のメニューグループの最初のメニューアイテムにフォーカスを移動します。
home	サブメニュー内の最初のメニューアイテムにフォーカスを移動します。
end	サブメニュー内の最後のメニューアイテムにフォーカスを移動します。
任意の印刷可能な文字	入力された文字で始まるラベルを持つメニューアイテムにフォーカスを移動します。

MegaMenu