PanelMenu

PanelMenuは、アコーディオンとツリーコンポーネントのハイブリッドです。

インポート # 


import PanelMenu from 'primevue/panelmenu';

基本 #

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


<PanelMenu :model="items" />

複数選択 #

デフォルトでは、一度にアクティブにできるルートメニューアイテムは1つだけです。multipleプロパティを有効にすると、複数のルートメニューアイテムを同時にアクティブにできます。


<PanelMenu :model="items" multiple />

制御 #

メニューアイテムにkeyが定義されている場合、展開されているキーを定義するexpandedKeysプロパティを使用して、PanelMenuの状態をプログラムで制御できます。このプロパティは、キーがノードのキーで、値がブール値であるMapインスタンスです。


<Button type="button" label="Toggle All" text @click="toggleAll" />
<PanelMenu v-model:expandedKeys="expandedKeys" :model="items" />

テンプレート #

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


<PanelMenu :model="items">
    <template #item="{ item }">
        <a v-ripple class="flex items-center px-4 py-2 cursor-pointer group">
            <span :class="[item.icon, 'text-primary group-hover:text-inherit']" />
            <span :class="['ml-2', { 'font-semibold': item.items }]">{{ 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>
        </a>
    </template>
</PanelMenu>

コマンド #

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


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

ルーター #

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


<PanelMenu :model="items">
    <template #item="{ item }">
        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
            <a v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="href" @click="navigate">
                <span :class="item.icon" />
                <span class="ml-2">{{ item.label }}</span>
            </a>
        </router-link>
        <a v-else v-ripple class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2" :href="item.url" :target="item.target">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
            <span v-if="item.items" class="pi pi-angle-down text-primary ml-auto" />
        </a>
    </template>
</PanelMenu>

アクセシビリティ #

スクリーンリーダー

アコーディオンヘッダー要素は、buttonロールを持ち、メニューアイテムモデルのlabelプロパティを使用して定義されたaria-labelと、コンテンツセクションのIDを定義するaria-controls、および可視状態のaria-expandedを持ちます。

アコーディオンパネルのコンテンツは、regionロールを使用し、ヘッダーのaria-controlsと一致するIDと、ヘッダーのIDを参照するaria-labelledbyを定義します。

ツリー要素はロールとしてtreeを持ち、各メニューアイテムはtreeitemロールとaria-labelおよびaria-expanded属性を持ちます。ツリーノードのコンテナ要素はgroupロールを持ちます。aria-setsize、aria-posinset、aria-level属性は暗黙的に計算され、各treeitemに追加されます。

ヘッダーのキーボードサポート

キー機能
tabフォーカスをページのタブシーケンス内の次のフォーカス可能な要素に移動します。
shift + tabページのタブシーケンスにおける、前のフォーカス可能な要素にフォーカスを移動します。
Enterキーコンテンツの表示/非表示を切り替えます。
スペースキーコンテンツの表示/非表示を切り替えます。
下矢印キー次の見出しにフォーカスを移動します。最後の見出しにフォーカスがある場合は、最初の見出しにフォーカスを移動します。
上矢印キー前の見出しにフォーカスを移動します。最初の見出しにフォーカスがある場合は、最後の見出しにフォーカスを移動します。
Homeキー最初の見出しにフォーカスを移動します。
Endキー最後の見出しにフォーカスを移動します。
PrimeTekによるVue 3上のPrimeVue 4.0.7 PrimeTek