階層式選單

階層式選單會在巢狀覆蓋層中顯示子選單。

匯入 #


import TieredMenu from 'primevue/tieredmenu';

基本 #

階層式選單需要選單項目集合作為其模型。


<TieredMenu :model="items" />

彈出視窗 #

透過新增 popup 屬性並使用目標事件呼叫選單 ref 的 toggle 函式來啟用覆蓋模式。


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

範本 #

階層式選單透過 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 設定為「垂直」，而且描述選單的值可以使用 aria-labelledby 或 aria-label 屬性提供。每個列表項目都有一個 menuitem 角色，並具有參照項目標籤的 aria-label，以及在停用項目時定義的 aria-disabled。階層式選單中的子選單會使用 menu 角色，並將 aria-labelledby 定義為子選單根選單項目標籤的 ID。此外，開啟子選單的選單項目具有 aria-haspopup 和 aria-expanded 來定義項目與子選單之間的關係。

在彈出視窗模式中，元件會隱式管理目標元素的 aria-expanded、aria-haspopup 和 aria-controls 屬性，以定義目標與彈出視窗之間的關係。

鍵盤支援

按鍵	功能
tab	如果焦點移入選單，則將焦點新增至第一個項目。如果焦點已在選單內，則焦點會移至頁面 tab 順序中的下一個可聚焦項目。
shift + tab	如果焦點移入選單，則將焦點新增至第一個項目。如果焦點已在選單內，則焦點會移至頁面 tab 順序中的上一個可聚焦項目。
enter	如果選單項目具有子選單，則會開啟子選單，否則會啟用選單項目並關閉所有開啟的覆蓋層。
space	如果選單項目具有子選單，則會開啟子選單，否則會啟用選單項目並關閉所有開啟的覆蓋層。
escape	如果焦點位於彈出子選單內，則會關閉子選單並將焦點移至已關閉子選單的根項目。
向下箭頭	將焦點移至子選單中的下一個選單項目。
向上箭頭	將焦點移至子選單中的上一個選單項目。
alt + 向上箭頭	關閉彈出視窗，然後將焦點移至目標元素。
向右箭頭	如果選項已關閉，則會開啟選項，否則會將焦點移至第一個子選項。
向左箭頭	如果選項已開啟，則會關閉選項，否則會將焦點移至父選項。
home	將焦點移至子選單中的第一個選單項目。
end	將焦點移至子選單中的最後一個選單項目。
任何可列印的字元	將焦點移至標籤以鍵入的字元開頭的選單項目。