import Dock from 'primevue/dock';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/slider/slider.min.js"></script>
Dock is a navigation component consisting of menuitems. It has a collection of additional options defined by the model property.
<Dock :model="items" />
export default {
data() {
return {
items: [
{
label: "Finder",
icon: "demo/images/dock/finder.svg"
},
{
label: "App Store",
icon: "demo/images/dock/appstore.svg"
},
{
label: "Photos",
icon: "demo/images/dock/photos.svg"
},
{
label: "Trash",
icon: "demo/images/dock/trash.png"
}
]
}
}
}
Dock uses the common MenuModel API to define the items, visit
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| model | object | null | MenuModel instance to define the action items. |
| position | string | bottom | Position of element. Valid values are 'bottom', 'top', 'left' and 'right'. |
| class | string | null | Style class of the element. |
| style | object | null | Inline style of the element. |
| exact | boolean | true | Whether to apply 'router-link-active-exact' class if route exactly matches the item path. |
| tooltipOptions | object | null | Whether to display the tooltip on items. The modifiers of |
| menuId | string | null | Unique identifier of the menu. |
| tabindex | number | 0 | Index of the element in tabbing order. |
| Name | Parameters | Description |
|---|---|---|
| focus | event | Callback to invoke when the component receives focus. |
| blur | event | Callback to invoke when the component loses focus. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-dock | Container element. |
| p-dock-list-container | Container of the list. |
| p-dock-list | List of items. |
| p-dock-item | Each items in list. |
| p-menuitem-content | Content of menuitem. |
| p-dock-link | Link of the menuitem. |
| p-dock-icon | Icon of a menuitem. |
| Name | Parameters |
|---|---|
| item |
item: Custom content for menuitem index: Index of the menuitem |
| icon | item: Custom content for icon |
Dock component uses the menu role with the aria-orientation and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled.
| Key | Function |
|---|---|
| tab | Moves focus to the first menuitem. |
| enter | Activates the focused menuitem. |
| space | Activates the focused menuitem. |
| down arrow | Moves focus to the next menuitem in vertical layout. |
| up arrow | Moves focus to the previous menuitem in vertical layout. |
| right arrow | Moves focus to the next menuitem in horizontal layout. |
| left arrow | Moves focus to the previous menuitem in horizontal layout. |
| home | Moves focus to the first menuitem. |
| end | Moves focus to the last menuitem. |
None.