PanelMenu

PanelMenu 是手風琴式樹狀元件的混合體。

匯入 #


import PanelMenu from 'primevue/panelmenu';

基本 #

PanelMenu 需要一個 menuitems 的集合作為其model。

檔案

雲端

裝置


<PanelMenu :model="items" />

多個 #

預設情況下，一次只能有一個根 menuitem 處於活動狀態，啟用multiple屬性會更改此行為以允許多個根 menuitem。

檔案

雲端

裝置


<PanelMenu :model="items" multiple />

受控 #

如果 menuitem 定義了key，則可以使用expandedKeys屬性以程式方式控制 PanelMenu 狀態，該屬性定義了展開的鍵。此屬性是一個 Map 實例，其鍵是一個節點的鍵，值是一個布林值。

使用者

任務

日曆


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

範本 #

PanelMenu 提供使用item範本進行項目自訂，該範本會接收模型中的 menuitem 實例作為參數。

郵件5

報表⌘+R

個人資料⌘+W


<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角色，使用 menuitem 模型的label屬性定義的aria-label，以及aria-controls來定義內容區段的 id，以及用於可見性狀態的aria-expanded。

手風琴面板的內容使用region角色，定義與標頭的aria-controls相符的 id，以及參考標頭 id 的aria-labelledby。

樹狀元素具有tree作為角色，每個選單項目具有treeitem角色以及aria-label和aria-expanded屬性。樹狀節點的容器元素具有group角色。aria-setsize、aria-posinset和aria-level屬性是隱式計算並新增至每個 treeitem。

標頭鍵盤支援

按鍵	功能
tab	將焦點移至頁面 tab 順序中的下一個可聚焦元素。
shift + tab	將焦點移至頁面 tab 順序中的上一個可聚焦元素。
enter	切換內容的顯示狀態。
空白鍵	切換內容的顯示狀態。
向下箭頭	將焦點移至下一個標頭。如果焦點位於最後一個標頭，則將焦點移至第一個標頭。
向上箭頭	將焦點移至上一個標頭。如果焦點位於第一個標頭，則將焦點移至最後一個標頭。
home	將焦點移至第一個標頭。
end	將焦點移至最後一個標頭。