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

Animated submenus

pull/345/head
cagataycivici 2020-05-14 10:27:08 +03:00
parent 45b948da88
commit 50639915e4
2 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/AppMenu.vue
View File

@ -60,10 +60,11 @@
</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,isExactActive}"> <a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"> <transition name="p-toggleable-content">
<a :href="href" @click="navigate">DataTable</a> <div class="p-toggleable-content" v-show="activeSubmenus['datatable'] === true">
<ul> <ul>
<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>
<li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li> <li><router-link to="/datatable/dynamiccolumns">Dynamic</router-link></li>
<li><router-link to="/datatable/templating">Templating</router-link></li> <li><router-link to="/datatable/templating">Templating</router-link></li>
@ -89,7 +90,7 @@
<li><router-link to="/datatable/crud">Crud</router-link></li> <li><router-link to="/datatable/crud">Crud</router-link></li>
</ul> </ul>
</div> </div>
</router-link> </transition>
<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>
@ -97,21 +98,24 @@
<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,isExactActive}"> <a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"> <transition name="p-toggleable-content">
<a :href="href" @click="navigate">Tree</a> <div class="p-toggleable-content" v-show="activeSubmenus['tree']">
<ul> <ul>
<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>
<li><router-link to="/tree/lazy">Lazy</router-link></li> <li><router-link to="/tree/lazy">Lazy</router-link></li>
<li><router-link to="/tree/templating">Templating</router-link></li> <li><router-link to="/tree/templating">Templating</router-link></li>
<li><router-link to="/tree/filter">Filter</router-link></li> <li><router-link to="/tree/filter">Filter</router-link></li>
</ul> </ul>
</div> </div>
</router-link> </transition>
<router-link to="/treetable" v-slot="{href,route,navigate,isActive,isExactActive}">
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"> <a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a>
<a :href="href" @click="navigate">TreeTable</a> <transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="activeSubmenus['treetable']">
<ul> <ul>
<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>
<li><router-link to="/treetable/size">Size</router-link></li> <li><router-link to="/treetable/size">Size</router-link></li>
<li><router-link to="/treetable/paginator">Paginator</router-link></li> <li><router-link to="/treetable/paginator">Paginator</router-link></li>
@ -124,7 +128,7 @@
<li><router-link to="/treetable/responsive">Responsive</router-link></li> <li><router-link to="/treetable/responsive">Responsive</router-link></li>
</ul> </ul>
</div> </div>
</router-link> </transition>
</div> </div>
<span> <span>
@ -206,10 +210,10 @@
<span>Image</span> <span>Image</span>
</span> </span>
<div> <div>
<router-link to="/galleria" v-slot="{href,route,navigate,isActive,isExactActive}"> <a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"> <transition name="p-toggleable-content">
<a :href="href" @click="navigate">Galleria</a> <div class="p-toggleable-content" v-show="activeSubmenus['galleria']">
<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/basic">Basic</router-link></li> <li><router-link to="/galleria/basic">Basic</router-link></li>
<li><router-link to="/galleria/indicator">Indicator</router-link></li> <li><router-link to="/galleria/indicator">Indicator</router-link></li>
@ -221,11 +225,9 @@
<li><router-link to="/galleria/caption">Caption</router-link></li> <li><router-link to="/galleria/caption">Caption</router-link></li>
</ul> </ul>
</div> </div>
</router-link> </transition>
</div> </div>
<span> <span>
<i class="pi pi-share-alt"></i> <i class="pi pi-share-alt"></i>
<span>Misc</span> <span>Misc</span>
@ -250,12 +252,14 @@ export default {
}, },
data() { data() {
return { return {
activeMenuIndex: null activeSubmenus: {}
} }
}, },
methods: { methods: {
toggleMenu(event, index) { toggleSubmenu(event, name) {
this.activeMenuIndex = (this.activeMenuIndex === index) ? null : index; this.activeSubmenus[name] = this.activeSubmenus[name] ? false: true;
this.activeSubmenus = {...this.activeSubmenus};
event.preventDefault();
} }
} }
} }

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

@ -41,6 +41,7 @@
padding: .5rem; padding: .5rem;
border-radius: 3px; border-radius: 3px;
transition: background-color .2s; transition: background-color .2s;
cursor: pointer;
&:hover { &:hover {
background-color: var(--layer-2); background-color: var(--layer-2);