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>
<div>
<router-link to="/carousel">Carousel</router-link>
<router-link to="/datatable" v-slot="{href,route,navigate,isActive,isExactActive}">
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
<a :href="href" @click="navigate">DataTable</a>
<a tabindex="0" @click="toggleSubmenu($event, 'datatable')">DataTable</a>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="activeSubmenus['datatable'] === true">
<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/dynamiccolumns">Dynamic</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>
</ul>
</div>
</router-link>
</transition>
<router-link to="/dataview">DataView</router-link>
<router-link to="/fullcalendar">FullCalendar</router-link>
@ -97,21 +98,24 @@
<router-link to="/organizationchart">OrganizationChart</router-link>
<router-link to="/paginator">Paginator</router-link>
<router-link to="/picklist">PickList</router-link>
<router-link to="/tree" v-slot="{href,route,navigate,isActive,isExactActive}">
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
<a :href="href" @click="navigate">Tree</a>
<a tabindex="0" @click="toggleSubmenu($event, 'tree')">Tree</a>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="activeSubmenus['tree']">
<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/lazy">Lazy</router-link></li>
<li><router-link to="/tree/templating">Templating</router-link></li>
<li><router-link to="/tree/filter">Filter</router-link></li>
</ul>
</div>
</router-link>
<router-link to="/treetable" v-slot="{href,route,navigate,isActive,isExactActive}">
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
<a :href="href" @click="navigate">TreeTable</a>
</transition>
<a tabindex="0" @click="toggleSubmenu($event, 'treetable')">TreeTable</a>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="activeSubmenus['treetable']">
<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/size">Size</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>
</ul>
</div>
</router-link>
</transition>
</div>
<span>
@ -206,10 +210,10 @@
<span>Image</span>
</span>
<div>
<router-link to="/galleria" v-slot="{href,route,navigate,isActive,isExactActive}">
<div :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']">
<a :href="href" @click="navigate">Galleria</a>
<ul>
<a tabindex="0" @click="toggleSubmenu($event, 'galleria')">Galleria</a>
<transition name="p-toggleable-content">
<div class="p-toggleable-content" v-show="activeSubmenus['galleria']">
<ul>
<li><router-link to="/galleria">Documentation</router-link></li>
<li><router-link to="/galleria/basic">Basic</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>
</ul>
</div>
</router-link>
</transition>
</div>
<span>
<i class="pi pi-share-alt"></i>
<span>Misc</span>
@ -250,12 +252,14 @@ export default {
},
data() {
return {
activeMenuIndex: null
activeSubmenus: {}
}
},
methods: {
toggleMenu(event, index) {
this.activeMenuIndex = (this.activeMenuIndex === index) ? null : index;
toggleSubmenu(event, name) {
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;
border-radius: 3px;
transition: background-color .2s;
cursor: pointer;
&:hover {
background-color: var(--layer-2);