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>

進階 #

使用各種元件的範例桌面演示。


<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	啟用焦點選單項目。
space	啟用焦點選單項目。
向下箭頭	在垂直版面配置中將焦點移動到下一個選單項目。
向上箭頭	在垂直版面配置中將焦點移動到上一個選單項目。
向右箭頭	在水平版面配置中將焦點移動到下一個選單項目。
向左箭頭	在水平版面配置中將焦點移動到上一個選單項目。
home	將焦點移動到第一個選單項目。
end	將焦點移動到最後一個選單項目。