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>
|
||||
|
||||
<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>
|
||||
<Menu :model="items" />
|
||||
<PanelMenu :model="items" />
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
|
|
@ -21,65 +21,125 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
url: 'https://vuejs.org/'
|
||||
},
|
||||
{
|
||||
label: 'Router',
|
||||
icon: 'pi pi-upload',
|
||||
to: '/fileupload'
|
||||
{
|
||||
label: 'File',
|
||||
icon:'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon:'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon:'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
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: '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>
|
||||
|
||||
<h3>Properties</h3>
|
||||
|
|
@ -100,61 +160,6 @@ toggle(event) {
|
|||
<td>array</td>
|
||||
<td>null</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>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -172,11 +177,19 @@ toggle(event) {
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-menu</td>
|
||||
<td>p-panelmenu</td>
|
||||
<td>Container element.</td>
|
||||
</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>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -190,6 +203,10 @@ toggle(event) {
|
|||
<tr>
|
||||
<td>p-menuitem-icon</td>
|
||||
<td>Icon of a menuitem.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-panelmenu-icon</td>
|
||||
<td>Arrow icon of an accordion header.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -205,12 +222,7 @@ toggle(event) {
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<h3>Inline</h3>
|
||||
<Menu :model="items" />
|
||||
|
||||
<h3>Overlay</h3>
|
||||
<Button type="button" label="Toggle" @click="toggle" />
|
||||
<Menu ref="menu" :model="items" :popup="true" />
|
||||
<PanelMenu :model="items" />
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
|
|
@ -220,44 +232,121 @@ export default {
|
|||
return {
|
||||
items: [
|
||||
{
|
||||
label: 'Options',
|
||||
items: [{
|
||||
label: 'Update',
|
||||
icon: 'pi pi-refresh',
|
||||
command: () => {
|
||||
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Delete',
|
||||
icon: 'pi pi-times',
|
||||
command: () => {
|
||||
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
|
||||
}
|
||||
}
|
||||
]},
|
||||
label: 'File',
|
||||
icon:'pi pi-fw pi-file',
|
||||
items: [
|
||||
{
|
||||
label: 'New',
|
||||
icon:'pi pi-fw pi-plus',
|
||||
items: [
|
||||
{
|
||||
label: 'Bookmark',
|
||||
icon:'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
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',
|
||||
items: [{
|
||||
label: 'Vue Website',
|
||||
icon: 'pi pi-external-link',
|
||||
url: 'https://vuejs.org/'
|
||||
},
|
||||
{
|
||||
label: 'Router',
|
||||
icon: 'pi pi-upload',
|
||||
to: '/fileupload'
|
||||
}
|
||||
]}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle(event) {
|
||||
this.$refs.menu.toggle(event);
|
||||
},
|
||||
save() {
|
||||
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue