面板菜单

PanelMenu 是手风琴树组件的混合体。

导入 #


import PanelMenu from 'primevue/panelmenu';

基本 #

PanelMenu 需要一个菜单项集合作为其模型。

文件

云

设备


<PanelMenu :model="items" />

多个 #

默认情况下，一次只能激活一个根菜单项，启用 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 模板提供项目自定义，该模板接收来自模型的菜单项实例作为参数。

邮件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 角色，使用菜单项模型的 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	将焦点移动到最后一个标题。