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

Router support for menu

pull/345/head
cagataycivici 2020-05-15 18:43:15 +03:00
parent 0ae04152c1
commit cf198eee21
2 changed files with 90 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/AppMenu.vue
View File

@ -60,9 +60,10 @@
</span> </span>
<div> <div>
<router-link to="/carousel">Carousel</router-link> <router-link to="/carousel">Carousel</router-link>
<router-link to="/datatable" v-slot="{ href, route, navigate, isActive }">
<a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a> <a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="activeSubmenus['datatable'] === true"> <div class="p-toggleable-content" v-show="isSubmenuActive('datatable', isActive)">
<ul> <ul>
<li><router-link to="/datatable">Documentation</router-link></li> <li><router-link to="/datatable">Documentation</router-link></li>
<li><router-link to="/datatable/basic">Basic</router-link></li> <li><router-link to="/datatable/basic">Basic</router-link></li>
@ -91,6 +92,7 @@
</ul> </ul>
</div> </div>
</transition> </transition>
</router-link>
<router-link to="/dataview">DataView</router-link> <router-link to="/dataview">DataView</router-link>
<router-link to="/fullcalendar">FullCalendar</router-link> <router-link to="/fullcalendar">FullCalendar</router-link>
@ -98,9 +100,10 @@
<router-link to="/organizationchart">OrganizationChart</router-link> <router-link to="/organizationchart">OrganizationChart</router-link>
<router-link to="/paginator">Paginator</router-link> <router-link to="/paginator">Paginator</router-link>
<router-link to="/picklist">PickList</router-link> <router-link to="/picklist">PickList</router-link>
<router-link to="/tree" v-slot="{ href, route, navigate, isActive }">
<a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a> <a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="activeSubmenus['tree']"> <div class="p-toggleable-content" v-show="isSubmenuActive('tree', isActive)">
<ul> <ul>
<li><router-link to="/tree">Documentation</router-link></li> <li><router-link to="/tree">Documentation</router-link></li>
<li><router-link to="/tree/selection">Selection</router-link></li> <li><router-link to="/tree/selection">Selection</router-link></li>
@ -110,10 +113,11 @@
</ul> </ul>
</div> </div>
</transition> </transition>
</router-link>
<router-link to="/treetable" v-slot="{ href, route, navigate, isActive }">
<a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a> <a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="activeSubmenus['treetable']"> <div class="p-toggleable-content" v-show="isSubmenuActive('treetable', isActive)">
<ul> <ul>
<li><router-link to="/treetable">Documentation</router-link></li> <li><router-link to="/treetable">Documentation</router-link></li>
<li><router-link to="/treetable/templating">Templating</router-link></li> <li><router-link to="/treetable/templating">Templating</router-link></li>
@ -129,6 +133,7 @@
</ul> </ul>
</div> </div>
</transition> </transition>
</router-link>
</div> </div>
<span> <span>
@ -210,9 +215,10 @@
<span>Image</span> <span>Image</span>
</span> </span>
<div> <div>
<router-link to="/galleria" v-slot="{ href, route, navigate, isActive }">
<a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a> <a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>
<transition name="p-toggleable-content"> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="activeSubmenus['galleria']"> <div class="p-toggleable-content" v-show="isSubmenuActive('galleria', isActive)">
<ul> <ul>
<li><router-link to="/galleria">Documentation</router-link></li> <li><router-link to="/galleria">Documentation</router-link></li>
<li><router-link to="/galleria/programmatic">Programmatic</router-link></li> <li><router-link to="/galleria/programmatic">Programmatic</router-link></li>
@ -227,6 +233,7 @@
</ul> </ul>
</div> </div>
</transition> </transition>
</router-link>
</div> </div>
<span> <span>
@ -261,6 +268,9 @@ export default {
this.activeSubmenus[name] = this.activeSubmenus[name] ? false: true; this.activeSubmenus[name] = this.activeSubmenus[name] ? false: true;
this.activeSubmenus = {...this.activeSubmenus}; this.activeSubmenus = {...this.activeSubmenus};
event.preventDefault(); event.preventDefault();
},
isSubmenuActive(name, routerIsActive) {
return this.activeSubmenus.hasOwnProperty(name) ? this.activeSubmenus[name] : routerIsActive;
} }
} }
} }

2
src/assets/styles/app/_menu.scss
View File

@ -59,7 +59,7 @@
} }
} }
> div { div {
&.router-link-exact-active { &.router-link-exact-active {
> a { > a {
font-weight: 700; font-weight: 700;