Dock

Dock 是一个由菜单项组成的导航组件。

导入 #


import Dock from 'primevue/dock';

基本 #

菜单需要一个菜单项集合作为其 model 和一个 icon 模板。默认位置是 bottom，当使用 position 属性定义时，也可以使用其他边缘。

底部

顶部

左侧

右侧


<Dock :model="items" :position="position">
    <template #itemicon="{ item }">
        <img v-tooltip.top="item.label" :alt="item.label" :src="item.icon" style="width: 100%" />
    </template>
</Dock>

高级 #

使用各种组件的示例桌面演示。

周五 13:07


<Dock :model="items">
    <template #item="{ item }">
        <a v-tooltip.top="item.label" href="#" class="p-dock-item-link" @click="onDockItemClick($event, item)">
            <img :alt="item.label" :src="item.icon" style="width: 100%" />
        </a>
    </template>
</Dock>

可访问性 #

屏幕阅读器

Dock 组件使用 menu 角色，并带有 aria-orientation，描述菜单的值可以使用 aria-labelledby 或 aria-label 属性提供。每个列表项都有一个 menuitem 角色，其中 aria-label 指的是该项的标签，如果该项被禁用，则定义 aria-disabled。

键盘支持

按键	功能
tab	将焦点移动到第一个菜单项。
enter	激活聚焦的菜单项。
空格	激活聚焦的菜单项。
下箭头	在垂直布局中将焦点移动到下一个菜单项。
上箭头	在垂直布局中将焦点移动到上一个菜单项。
右箭头	在水平布局中将焦点移动到下一个菜单项。
左箭头	在水平布局中将焦点移动到上一个菜单项。
home	将焦点移动到第一个菜单项。
end	将焦点移动到最后一个菜单项。