Docs for PanelMenu
cagataycivici
parent
ebba7cc73c
commit
0c78759e79
|
|
@ -0,0 +1 @@
|
||||||
|
export * from './components/panelmenu/PanelMenu';
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
'use strict';
|
||||||
|
module.exports = require('./components/panelmenu/PanelMenu.vue');
|
||||||
|
|
||||||
|
|
@ -11,9 +11,9 @@ import PanelMenu from 'primevue/panelmenu';
|
||||||
<p>Menu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
|
<p>Menu 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>PanelMenu requires a collection of menuitems as its model.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<Menu :model="items" />
|
<PanelMenu :model="items" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
<CodeHighlight lang="js">
|
||||||
|
|
@ -21,65 +21,125 @@ 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: 'Delete',
|
||||||
label: 'Router',
|
icon:'pi pi-fw pi-trash'
|
||||||
icon: 'pi pi-upload',
|
},
|
||||||
to: '/fileupload'
|
{
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<CodeHighlight>
|
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
|
||||||
<Menu ref="menu" :model="items" :popup="true" />
|
|
||||||
</CodeHighlight>
|
|
||||||
|
|
||||||
<CodeHighlight lang="js">
|
|
||||||
toggle(event) {
|
|
||||||
this.$refs.menu.toggle(event);
|
|
||||||
}
|
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties</h3>
|
<h3>Properties</h3>
|
||||||
|
|
@ -100,61 +160,6 @@ toggle(event) {
|
||||||
<td>array</td>
|
<td>array</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>An array of menuitems.</td>
|
<td>An array of menuitems.</td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>popup</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>false</td>
|
|
||||||
<td>Defines if menu would displayed as a popup.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>appendTo</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>null</td>
|
|
||||||
<td>DOM element instance where the dialog should be mounted.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>baseZIndex</td>
|
|
||||||
<td>number</td>
|
|
||||||
<td>0</td>
|
|
||||||
<td>Base zIndex value to use in layering.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>autoZIndex</td>
|
|
||||||
<td>boolean</td>
|
|
||||||
<td>true</td>
|
|
||||||
<td>Whether to automatically manage layering.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3>Methods</h3>
|
|
||||||
<div class="doc-tablewrapper">
|
|
||||||
<table class="doc-table">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Parameters</th>
|
|
||||||
<th>Description</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
<td>toggle</td>
|
|
||||||
<td>event: Browser event</td>
|
|
||||||
<td>Toggles the visibility of the overlay.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>show</td>
|
|
||||||
<td>event: Browser event <br />
|
|
||||||
target: Optional target if event.target would not be used</td>
|
|
||||||
<td>Shows the overlay.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>hide</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td>Hides the overlay.</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -172,11 +177,19 @@ toggle(event) {
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-menu</td>
|
<td>p-panelmenu</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-menu-list</td>
|
<td>p-panelmenu-header</td>
|
||||||
|
<td>Accordion header of root submenu.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-panelmenu-content</td>
|
||||||
|
<td>Accordion content of root submenu.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>p-submenu-list</td>
|
||||||
<td>List element.</td>
|
<td>List element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -190,6 +203,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-panelmenu-icon</td>
|
||||||
|
<td>Arrow icon of an accordion header.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
@ -205,12 +222,7 @@ toggle(event) {
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<h3>Inline</h3>
|
<PanelMenu :model="items" />
|
||||||
<Menu :model="items" />
|
|
||||||
|
|
||||||
<h3>Overlay</h3>
|
|
||||||
<Button type="button" label="Toggle" @click="toggle" />
|
|
||||||
<Menu ref="menu" :model="items" :popup="true" />
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -220,44 +232,121 @@ 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'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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'
|
||||||
},
|
},
|
||||||
methods: {
|
{
|
||||||
toggle(event) {
|
label: 'Justify',
|
||||||
this.$refs.menu.toggle(event);
|
icon:'pi pi-fw pi-align-justify'
|
||||||
},
|
}
|
||||||
save() {
|
]
|
||||||
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
},
|
||||||
|
{
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue