d.ts and shorthand for TieredMenu
cagataycivici
parent
5d2d3b13c2
commit
1642dd453f
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './components/tieredmenu/TieredMenu';
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
'use strict';
|
||||||
|
module.exports = require('./components/tieredmenu/TieredMenu.vue');
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
.p-menu {
|
|
||||||
width: 12.5em;
|
|
||||||
padding: .25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menu.p-menu-dynamic {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menu .p-menu-separator {
|
|
||||||
border-width: 1px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menu ul {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menu .p-submenu-header {
|
|
||||||
padding: .25em .5em;
|
|
||||||
margin: .125em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menu .p-menuitem {
|
|
||||||
margin: .125em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menu .p-menuitem-link {
|
|
||||||
padding: .25em;
|
|
||||||
display: block;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menu .p-menuitem-icon {
|
|
||||||
margin-right: .25em;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-menu .p-menuitem-text {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
|
||||||
|
export declare class TieredMenu extends Vue {
|
||||||
|
popup?: boolean;
|
||||||
|
model?: any[];
|
||||||
|
appendTo?: string;
|
||||||
|
autoZIndex?: boolean;
|
||||||
|
baseZIndex?: number;
|
||||||
|
toggle(event: Event): void;
|
||||||
|
show(event: Event, target?: any): void;
|
||||||
|
hide(): void;
|
||||||
|
}
|
||||||
|
|
@ -4,76 +4,164 @@
|
||||||
<TabPanel header="Documentation">
|
<TabPanel header="Documentation">
|
||||||
<h3>Import</h3>
|
<h3>Import</h3>
|
||||||
<CodeHighlight lang="javascript">
|
<CodeHighlight lang="javascript">
|
||||||
import Menu from 'primevue/menu';
|
import TieredMenu from 'primevue/menu';
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>MenuModel</h3>
|
<h3>MenuModel</h3>
|
||||||
<p>Menu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
|
<p>TieredMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
|
||||||
|
|
||||||
<h3>Getting Started</h3>
|
<h3>Getting Started</h3>
|
||||||
<p>Menu requires a collection of menuitems as its model.</p>
|
<p>TieredMenu requires a collection of menuitems as its model.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Menu :model="items" />
|
<TieredMenu :model="items" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'Update',
|
label:'File',
|
||||||
icon: 'pi pi-refresh',
|
icon:'pi pi-fw pi-file',
|
||||||
command: () => {
|
items:[
|
||||||
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
|
{
|
||||||
}
|
label:'New',
|
||||||
},
|
icon:'pi pi-fw pi-plus',
|
||||||
{
|
items:[
|
||||||
label: 'Delete',
|
{
|
||||||
icon: 'pi pi-times',
|
label:'Bookmark',
|
||||||
command: () => {
|
icon:'pi pi-fw pi-bookmark'
|
||||||
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
|
},
|
||||||
}
|
{
|
||||||
},
|
label:'Video',
|
||||||
{
|
icon:'pi pi-fw pi-video'
|
||||||
label: 'Vue Website',
|
},
|
||||||
icon: 'pi pi-external-link',
|
|
||||||
url: 'https://vuejs.org/'
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Router',
|
label:'Delete',
|
||||||
icon: 'pi pi-upload',
|
icon:'pi pi-fw pi-trash'
|
||||||
to: '/fileupload'
|
},
|
||||||
|
{
|
||||||
|
separator:true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Export',
|
||||||
|
icon:'pi pi-fw pi-external-link'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Edit',
|
||||||
|
icon:'pi pi-fw pi-pencil',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Left',
|
||||||
|
icon:'pi pi-fw pi-align-left'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Right',
|
||||||
|
icon:'pi pi-fw pi-align-right'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Center',
|
||||||
|
icon:'pi pi-fw pi-align-center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Justify',
|
||||||
|
icon:'pi pi-fw pi-align-justify'
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Users',
|
||||||
|
icon:'pi pi-fw pi-user',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'New',
|
||||||
|
icon:'pi pi-fw pi-user-plus',
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Delete',
|
||||||
|
icon:'pi pi-fw pi-user-minus',
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Search',
|
||||||
|
icon:'pi pi-fw pi-users',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Filter',
|
||||||
|
icon:'pi pi-fw pi-filter',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Print',
|
||||||
|
icon:'pi pi-fw pi-print'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'pi pi-fw pi-bars',
|
||||||
|
label:'List'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Events',
|
||||||
|
icon:'pi pi-fw pi-calendar',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Edit',
|
||||||
|
icon:'pi pi-fw pi-pencil',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Save',
|
||||||
|
icon:'pi pi-fw pi-calendar-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Delete',
|
||||||
|
icon:'pi pi-fw pi-calendar-minus'
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Archieve',
|
||||||
|
icon:'pi pi-fw pi-calendar-times',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Remove',
|
||||||
|
icon:'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator:true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Quit',
|
||||||
|
icon:'pi pi-fw pi-power-off'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
|
||||||
|
|
||||||
<h3>SubMenus</h3>
|
|
||||||
<p>Menu supports one level of nesting via subitems of an item.</p>
|
|
||||||
<CodeHighlight lang="js">
|
|
||||||
const items: [
|
|
||||||
{
|
|
||||||
label: 'Options',
|
|
||||||
items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} },
|
|
||||||
{label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'http://primetek.com.tr'}]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Account',
|
|
||||||
items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
|
|
||||||
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Popup Mode</h3>
|
<h3>Popup Mode</h3>
|
||||||
<p>Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
|
<p>TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
|
||||||
|
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
<Button type="button" label="Toggle" @click="toggle" />
|
||||||
<Menu ref="menu" :model="items" :popup="true" />
|
<TieredMenu ref="menu" :model="items" :popup="true" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -172,7 +260,7 @@ toggle(event) {
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-menu</td>
|
<td>p-tieredmenu</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -190,6 +278,10 @@ toggle(event) {
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-menuitem-icon</td>
|
<td>p-menuitem-icon</td>
|
||||||
<td>Icon of a menuitem.</td>
|
<td>Icon of a menuitem.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-submenu-icon</td>
|
||||||
|
<td>Arrow icon of a submenu.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -200,17 +292,17 @@ toggle(event) {
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/menu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tieredmenu" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
<span>View on GitHub</span>
|
<span>View on GitHub</span>
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<h3>Inline</h3>
|
<h3>Inline</h3>
|
||||||
<Menu :model="items" />
|
<TieredMenu :model="items" />
|
||||||
|
|
||||||
<h3>Overlay</h3>
|
<h3>Overlay</h3>
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
<Button type="button" label="Toggle" @click="toggle" />
|
||||||
<Menu ref="menu" :model="items" :popup="true" />
|
<TieredMenu ref="menu" :model="items" :popup="true" />
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -220,44 +312,140 @@ export default {
|
||||||
return {
|
return {
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
label: 'Options',
|
label:'File',
|
||||||
items: [{
|
icon:'pi pi-fw pi-file',
|
||||||
label: 'Update',
|
items:[
|
||||||
icon: 'pi pi-refresh',
|
{
|
||||||
command: () => {
|
label:'New',
|
||||||
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
|
icon:'pi pi-fw pi-plus',
|
||||||
}
|
items:[
|
||||||
},
|
{
|
||||||
{
|
label:'Bookmark',
|
||||||
label: 'Delete',
|
icon:'pi pi-fw pi-bookmark'
|
||||||
icon: 'pi pi-times',
|
},
|
||||||
command: () => {
|
{
|
||||||
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
|
label:'Video',
|
||||||
}
|
icon:'pi pi-fw pi-video'
|
||||||
}
|
},
|
||||||
]},
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Delete',
|
||||||
|
icon:'pi pi-fw pi-trash'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator:true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Export',
|
||||||
|
icon:'pi pi-fw pi-external-link'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: 'Navigate',
|
label:'Edit',
|
||||||
items: [{
|
icon:'pi pi-fw pi-pencil',
|
||||||
label: 'Vue Website',
|
items:[
|
||||||
icon: 'pi pi-external-link',
|
{
|
||||||
url: 'https://vuejs.org/'
|
label:'Left',
|
||||||
},
|
icon:'pi pi-fw pi-align-left'
|
||||||
{
|
},
|
||||||
label: 'Router',
|
{
|
||||||
icon: 'pi pi-upload',
|
label:'Right',
|
||||||
to: '/fileupload'
|
icon:'pi pi-fw pi-align-right'
|
||||||
}
|
},
|
||||||
]}
|
{
|
||||||
]
|
label:'Center',
|
||||||
|
icon:'pi pi-fw pi-align-center'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Justify',
|
||||||
|
icon:'pi pi-fw pi-align-justify'
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Users',
|
||||||
|
icon:'pi pi-fw pi-user',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'New',
|
||||||
|
icon:'pi pi-fw pi-user-plus',
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Delete',
|
||||||
|
icon:'pi pi-fw pi-user-minus',
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Search',
|
||||||
|
icon:'pi pi-fw pi-users',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Filter',
|
||||||
|
icon:'pi pi-fw pi-filter',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Print',
|
||||||
|
icon:'pi pi-fw pi-print'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon:'pi pi-fw pi-bars',
|
||||||
|
label:'List'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Events',
|
||||||
|
icon:'pi pi-fw pi-calendar',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Edit',
|
||||||
|
icon:'pi pi-fw pi-pencil',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Save',
|
||||||
|
icon:'pi pi-fw pi-calendar-plus'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Delete',
|
||||||
|
icon:'pi pi-fw pi-calendar-minus'
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Archieve',
|
||||||
|
icon:'pi pi-fw pi-calendar-times',
|
||||||
|
items:[
|
||||||
|
{
|
||||||
|
label:'Remove',
|
||||||
|
icon:'pi pi-fw pi-calendar-minus'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
separator:true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label:'Quit',
|
||||||
|
icon:'pi pi-fw pi-power-off'
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggle(event) {
|
toggle(event) {
|
||||||
this.$refs.menu.toggle(event);
|
this.$refs.menu.toggle(event);
|
||||||
},
|
|
||||||
save() {
|
|
||||||
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue