階層メニュー

階層メニューは、ネストされたオーバーレイにサブメニューを表示します。

インポート # 


import TieredMenu from 'primevue/tieredmenu';

基本 #

階層メニューでは、modelとしてmenuitemのコレクションが必要です。


<TieredMenu :model="items" />

ポップアップ #

オーバーレイモードは、popupプロパティを追加し、ターゲットのイベントでメニュー参照のtoggle関数を呼び出すことによって有効になります。


<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
<TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />

テンプレート #

階層メニューは、モデルからmenuitemインスタンスをパラメーターとして受け取るitemテンプレートでアイテムのカスタマイズを提供します。


<TieredMenu :model="items">
    <template #item="{ item, props, hasSubmenu }">
        <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="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
        </a>
    </template>
</TieredMenu>

コマンド #

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


<TieredMenu :model="items" />
<Toast />

ルーター #

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


<TieredMenu :model="items">
    <template #item="{ item, props, hasSubmenu }">
        <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>
            <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
        </a>
    </template>
</TieredMenu>

アクセシビリティ #

スクリーンリーダー

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

ポップアップモードでは、コンポーネントはターゲット要素のaria-expanded、aria-haspopup、およびaria-controls属性を暗黙的に管理して、ターゲットとポップアップの関係を定義します。

キーボードサポート

キー機能
tabフォーカスがメニューに移動した場合、最初のアイテムにフォーカスを追加します。フォーカスが既にメニュー内にある場合、フォーカスはページタブシーケンスの次のフォーカス可能なアイテムに移動します。
shift + tabフォーカスがメニューに移動した場合、最初のアイテムにフォーカスを追加します。フォーカスが既にメニュー内にある場合、フォーカスはページタブシーケンスの前のフォーカス可能なアイテムに移動します。
entermenuitemにサブメニューがある場合、サブメニューを開きます。それ以外の場合は、menuitemをアクティブ化し、開いているすべてのオーバーレイを閉じます。
スペースmenuitemにサブメニューがある場合、サブメニューを開きます。それ以外の場合は、menuitemをアクティブ化し、開いているすべてのオーバーレイを閉じます。
escapeフォーカスがポップアップサブメニュー内にある場合、サブメニューを閉じて、フォーカスを閉じたサブメニューのルートアイテムに移動します。
下矢印サブメニュー内の次のmenuitemにフォーカスを移動します。
上矢印サブメニュー内の前のmenuitemにフォーカスを移動します。
alt + 上矢印ポップアップを閉じて、ターゲット要素にフォーカスを移動します。
右矢印オプションが閉じている場合、オプションを開きます。それ以外の場合は、最初の子オプションにフォーカスを移動します。
左矢印オプションが開いている場合、オプションを閉じます。それ以外の場合は、親オプションにフォーカスを移動します。
homeサブメニュー内の最初のmenuitemにフォーカスを移動します。
endサブメニュー内の最後のmenuitemにフォーカスを移動します。
任意の印刷可能文字ラベルが入力されている文字で始まるmenuitemにフォーカスを移動します。
PrimeTekによるVue 3上のPrimeVue 4.0.7 PrimeTek