選單

選單以垂直方向顯示項目清單。

導入 #


import Menu from 'primevue/menu';

基本 #

選單需要一個選單項目的集合作為其模型。


<Menu :model="items" />

群組 #

選單透過使用items屬性定義子項目，支援單層分組。


<Menu :model="items" />

彈出視窗 #

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


<Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
<Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />

範本 #

選單透過item範本提供項目自訂功能，該範本會接收模型中的選單項目實例作為參數。子選單標籤有其自己的submenulabel範本，並提供名為start和end的額外插槽，以便在選單之前或之後嵌入內容。


<Menu :model="items" class="w-full md:w-60">
    <template #start>
        <span class="inline-flex items-center gap-1 px-2 py-2">
            <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>
            <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
        </span>
    </template>
    <template #submenulabel="{ item }">
        <span class="text-primary font-bold">{{ item.label }}</span>
    </template>
    <template #item="{ item, props }">
        <a v-ripple class="flex items-center" v-bind="props.action">
            <span :class="item.icon" />
            <span>{{ 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>
    <template #end>
        <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
            <span class="inline-flex flex-col items-start">
                <span class="font-bold">Amy Elsner</span>
                <span class="text-sm">Admin</span>
            </span>
        </button>
    </template>
</Menu>

指令 #

當項目被點擊或按鍵事件啟動時，command屬性會定義要執行的回呼。


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

路由器 #

具有導覽功能的項目透過範本定義，以便能夠使用路由器連結元件、外部連結或程式化導覽。


<Menu :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>
</Menu>

協助工具 #

螢幕閱讀器

選單元件使用menu角色，並且用於描述選單的值可以使用aria-labelledby或aria-label屬性提供。每個清單項目都有一個menuitem角色，其aria-label指的是項目的標籤，如果項目已停用，則定義aria-disabled。

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

鍵盤支援

按鍵	功能
tab	如果焦點移入選單，則將焦點新增至第一個項目。如果焦點已在選單內，則焦點會移動到頁面 tab 順序中的下一個可聚焦項目。
shift + tab	如果焦點移入選單，則將焦點新增至第一個項目。如果焦點已在選單內，則焦點會移動到頁面 tab 順序中的上一個可聚焦項目。
enter	啟動聚焦的選單項目。如果選單處於覆蓋模式，彈出視窗會關閉，並且焦點會移動到目標。
space	啟動聚焦的選單項目。如果選單處於覆蓋模式，彈出視窗會關閉，並且焦點會移動到目標。
escape	如果選單處於覆蓋模式，彈出視窗會關閉，並且焦點會移動到目標。
下箭頭	將焦點移動到下一個選單項目。
上箭頭	將焦點移動到上一個選單項目。
alt + 上箭頭	如果選單處於覆蓋模式，彈出視窗會關閉，並且焦點會移動到目標。
home	將焦點移動到第一個選單項目。
end	將焦點移動到最後一個選單項目。

選單