vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

#1275 for Menubar

pull/1533/head
Cagatay Civici 2021-08-27 15:46:44 +03:00
parent 558418030f
commit 35974df78b
5 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/menubar.js
View File

@ -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."
}
];

1
src/components/menubar/Menubar.d.ts vendored
View File

@ -2,6 +2,7 @@ import { VNode } from 'vue';
interface MenubarProps {
model?: any[];
exact?: boolean;
}
declare class Menubar {

7
src/components/menubar/Menubar.vue
View File

@ -6,7 +6,8 @@
<a ref="menubutton" tabindex="0" class="p-menubar-button" @click="toggle($event)">
<i class="pi pi-bars" />
</a>
<MenubarSub ref="rootmenu" :model="model" :root="true" :mobileActive="mobileActive" @leaf-click="onLeafClick" :template="$slots.item"/>
<MenubarSub ref="rootmenu" :model="model" :root="true" :mobileActive="mobileActive"
@leaf-click="onLeafClick" :template="$slots.item" :exact="exact" />
<div class="p-menubar-end" v-if="$slots.end">
<slot name="end"></slot>
</div>
@ -23,6 +24,10 @@ export default {
model: {
type: Array,
default: null
},
exact: {
type: Boolean,
default: true
}
},
outsideClickListener: null,

20
src/components/menubar/MenubarSub.vue
View File

@ -4,13 +4,13 @@
<li role="none" :class="getItemClass(item)" :style="item.style" v-if="visible(item) && !item.separator"
@mouseenter="onItemMouseEnter($event, item)">
<template v-if="!template">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href}">
<a :href="href" @click="onItemClick($event, item, navigate)" :class="getLinkClass(item)" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
<router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
<a :href="href" @click="onItemClick($event, item, navigate)" :class="linkClass(item, {isActive, isExactActive})" v-ripple @keydown="onItemKeyDown($event, item)" role="menuitem">
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
</a>
</router-link>
<a v-else :href="item.url" :class="getLinkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
<a v-else :href="item.url" :class="linkClass(item)" :target="item.target" :aria-haspopup="item.items != null" :aria-expanded="item === activeItem"
@click="onItemClick($event, item)" @keydown="onItemKeyDown($event, item)" role="menuitem" :tabindex="disabled(item) ? null : '0'" v-ripple>
<span :class="['p-menuitem-icon', item.icon]"></span>
<span class="p-menuitem-text">{{item.label}}</span>
@ -19,7 +19,7 @@
</template>
<component v-else :is="template" :item="item"></component>
<MenubarSub :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'" :mobileActive="mobileActive"
@leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :template="template" />
@leaf-click="onLeafClick" @keydown-item="onChildItemKeyDown" :parentActive="item === activeItem" :template="template" :exact="exact" />
</li>
<li :class="['p-menu-separator', item.class]" :style="item.style" v-if="visible(item) && item.separator" :key="'separator' + i.toString()" role="separator"></li>
</template>
@ -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) {

20
src/views/menubar/MenubarDoc.vue
View File

@ -154,7 +154,7 @@ export default {
</code></pre>
<h5>Custom Content</h5>
<h5>Templating</h5>
<p>Two slots named "start" and "end" are provided to embed content before or after the menubar. In additon Menubar, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
<pre v-code><code><template v-pre>
&lt;Menubar :model="items"&gt;
@ -169,6 +169,18 @@ export default {
&lt;/template&gt;
&lt;/Menubar&gt;
</template>
</code></pre>
<p><i>router-link</i> with route configuration can also be used within templating for further customization.</p>
<pre v-code><code><template v-pre>
&lt;Menubar :model="items"&gt;
&lt;template #item="{item}"&gt;
&lt;router-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}"&gt;
&lt;a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}&gt;{{route.fullPath}}&lt;/a&gt;
&lt;/router-link&gt;
&lt;/template&gt;
&lt;/Menubar&gt;
</template>
</code></pre>
<h5>Properties</h5>
@ -189,6 +201,12 @@ export default {
<td>array</td>
<td>null</td>
<td>An array of menuitems.</td>
</tr>
<tr>
<td>exact</td>
<td>boolean</td>
<td>true</td>
<td>Whether to apply 'router-link-active-exact' class if route exactly matches the item path.</td>
</tr>
</tbody>
</table>