diff --git a/api-generator/components/menubar.js b/api-generator/components/menubar.js index 549d8c047..675607011 100644 --- a/api-generator/components/menubar.js +++ b/api-generator/components/menubar.js @@ -4,6 +4,12 @@ const MenubarProps = [ type: "array", default: "null", description: "An array of menuitems." + }, + { + name: "exact", + type: "boolean", + default: "true", + description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path." } ]; diff --git a/src/components/menubar/Menubar.d.ts b/src/components/menubar/Menubar.d.ts index b7d34a09e..f443f01ce 100755 --- a/src/components/menubar/Menubar.d.ts +++ b/src/components/menubar/Menubar.d.ts @@ -2,6 +2,7 @@ import { VNode } from 'vue'; interface MenubarProps { model?: any[]; + exact?: boolean; } declare class Menubar { diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue index 5935650c4..4833a91da 100755 --- a/src/components/menubar/Menubar.vue +++ b/src/components/menubar/Menubar.vue @@ -6,7 +6,8 @@ - +
@@ -23,6 +24,10 @@ export default { model: { type: Array, default: null + }, + exact: { + type: Boolean, + default: true } }, outsideClickListener: null, diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue index da63d3a11..090af581c 100755 --- a/src/components/menubar/MenubarSub.vue +++ b/src/components/menubar/MenubarSub.vue @@ -4,13 +4,13 @@
  • + @leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :template="template" :exact="exact" />
  • @@ -57,6 +57,10 @@ export default { template: { type: Object, default: null + }, + exact: { + type: Boolean, + default: true } }, documentClickListener: null, @@ -250,8 +254,12 @@ export default { } ] }, - getLinkClass(item) { - return ['p-menuitem-link', {'p-disabled': this.disabled(item)}]; + linkClass(item, routerProps) { + return ['p-menuitem-link', { + 'p-disabled': this.disabled(item), + 'router-link-active': routerProps && routerProps.isActive, + 'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive + }]; }, bindDocumentClickListener() { if (!this.documentClickListener) { diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue index 7e95c0962..741c55425 100755 --- a/src/views/menubar/MenubarDoc.vue +++ b/src/views/menubar/MenubarDoc.vue @@ -154,7 +154,7 @@ export default { -
    Custom Content
    +
    Templating

    Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item customization with the item template that receives the menuitem instance from the model as a parameter.

    
    +
    + +

    router-link with route configuration can also be used within templating for further customization.

    +
    
     
    Properties
    @@ -189,6 +201,12 @@ export default { array null An array of menuitems. + + + exact + boolean + true + Whether to apply 'router-link-active-exact' class if route exactly matches the item path.