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	フォーカスを最後のメニューアイテムに移動します。