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 |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-dock | Container element. |
| p-dock-list | List of items. |
| p-dock-item | Each items in list. |
| Name | Parameters |
|---|---|
| item | item: Custom content for item |
| icon | item: Custom content for icon |
None.