From 0c78759e79fd75ff1e29b5db19aed1b66cdd7e40 Mon Sep 17 00:00:00 2001 From: cagataycivici Date: Mon, 9 Dec 2019 10:24:56 +0300 Subject: [PATCH] Docs for PanelMenu --- exports/panelmenu.d.ts | 1 + exports/panelmenu.js | 3 + src/views/panelmenu/PanelMenuDoc.vue | 403 ++++++++++++++++----------- 3 files changed, 250 insertions(+), 157 deletions(-) create mode 100644 exports/panelmenu.d.ts create mode 100644 exports/panelmenu.js diff --git a/exports/panelmenu.d.ts b/exports/panelmenu.d.ts new file mode 100644 index 000000000..561767f8a --- /dev/null +++ b/exports/panelmenu.d.ts @@ -0,0 +1 @@ +export * from './components/panelmenu/PanelMenu'; \ No newline at end of file diff --git a/exports/panelmenu.js b/exports/panelmenu.js new file mode 100644 index 000000000..e5f3ca99b --- /dev/null +++ b/exports/panelmenu.js @@ -0,0 +1,3 @@ +'use strict'; +module.exports = require('./components/panelmenu/PanelMenu.vue'); + \ No newline at end of file diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue index 429ffde94..f340fe19e 100644 --- a/src/views/panelmenu/PanelMenuDoc.vue +++ b/src/views/panelmenu/PanelMenuDoc.vue @@ -11,9 +11,9 @@ import PanelMenu from 'primevue/panelmenu';

Menu uses the common MenuModel API to define the items, visit MenuModel API for details.

Getting Started

-

Menu requires a collection of menuitems as its model.

+

PanelMenu requires a collection of menuitems as its model.

-<Menu :model="items" /> +<PanelMenu :model="items" /> @@ -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' + } + ] + } + ] } - ] + ] } } } - - -

SubMenus

-

Menu supports one level of nesting via subitems of an item.

- -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'} ] - } -]; - - -

Popup Mode

-

Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.

- - -<Button type="button" label="Toggle" @click="toggle" /> -<Menu ref="menu" :model="items" :popup="true" /> - - - -toggle(event) { - this.$refs.menu.toggle(event); -}

Properties

@@ -100,61 +160,6 @@ toggle(event) { array null An array of menuitems. - - - popup - boolean - false - Defines if menu would displayed as a popup. - - - appendTo - string - null - DOM element instance where the dialog should be mounted. - - - baseZIndex - number - 0 - Base zIndex value to use in layering. - - - autoZIndex - boolean - true - Whether to automatically manage layering. - - - - - -

Methods

-
- - - - - - - - - - - - - - - - - - - - - - -
NameParametersDescription
toggleevent: Browser eventToggles the visibility of the overlay.
showevent: Browser event
- target: Optional target if event.target would not be used		Shows the overlay.
hide-Hides the overlay.
@@ -172,11 +177,19 @@ toggle(event) { - p-menu + p-panelmenu Container element. - p-menu-list + p-panelmenu-header + Accordion header of root submenu. + + + p-panelmenu-content + Accordion content of root submenu. + + + p-submenu-list List element. @@ -190,6 +203,10 @@ toggle(event) { p-menuitem-icon Icon of a menuitem. + + + p-panelmenu-icon + Arrow icon of an accordion header. @@ -205,12 +222,7 @@ toggle(event) { @@ -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' + } + ] + } + ] + } + ] } } }