diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue index 4a3edaecc..a9be96ace 100644 --- a/src/components/megamenu/MegaMenu.vue +++ b/src/components/megamenu/MegaMenu.vue @@ -33,7 +33,7 @@ -
+
diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue index c7e9d7fda..83df542d4 100644 --- a/src/views/megamenu/MegaMenuDoc.vue +++ b/src/views/megamenu/MegaMenuDoc.vue @@ -4,153 +4,159 @@

Import

-import Menubar from 'primevue/menubar'; +import MegaMenu from 'primevue/megamenu';

MenuModel

-

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

+

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

-

Getting Started

-

Menubar requires a collection of menuitems as its model.

- -<Menubar :model="items" /> +

Getting Started

+

Layout of the MegaMenu is managed by the PrimeFlex that can be downloaded from npm.

+ +npm install primeflex --save - +

MegaMenu requires a collection of menuitems as its model.

+ +<MegaMenu :model="items" /> + + + export default { data() { return { items: [ { - label:'File', - icon:'pi pi-fw pi-file', - items:[ - { - label:'New', - icon:'pi pi-fw pi-plus', - items:[ + label: 'Videos', icon: 'pi pi-fw pi-video', + items: [ + [ { - label:'Bookmark', - icon:'pi pi-fw pi-bookmark' + label: 'Video 1', + items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}] }, { - 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:'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: 'Video 2', + items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}] } - ] - } - ] - }, - { - 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: 'Video 3', + items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}] }, { - 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' + label: 'Video 4', + items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}] } - ] - } - ] + ] + ] }, { - label:'Quit', - icon:'pi pi-fw pi-power-off' + label: 'Users', icon: 'pi pi-fw pi-users', + items: [ + [ + { + label: 'User 1', + items: [{label: 'User 1.1'}, {label: 'User 1.2'}] + }, + { + label: 'User 2', + items: [{label: 'User 2.1'}, {label: 'User 2.2'}] + }, + ], + [ + { + label: 'User 3', + items: [{label: 'User 3.1'}, {label: 'User 3.2'}] + }, + { + label: 'User 4', + items: [{label: 'User 4.1'}, {label: 'User 4.2'}] + } + ], + [ + { + label: 'User 5', + items: [{label: 'User 5.1'}, {label: 'User 5.2'}] + }, + { + label: 'User 6', + items: [{label: 'User 6.1'}, {label: 'User 6.2'}] + } + ] + ] + }, + { + label: 'Events', icon: 'pi pi-fw pi-calendar', + items: [ + [ + { + label: 'Event 1', + items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}] + }, + { + label: 'Event 2', + items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}] + } + ], + [ + { + label: 'Event 3', + items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}] + }, + { + label: 'Event 4', + items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}] + } + ] + ] + }, + { + label: 'Settings', icon: 'pi pi-fw pi-cog', + items: [ + [ + { + label: 'Setting 1', + items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}] + }, + { + label: 'Setting 2', + items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}] + }, + { + label: 'Setting 3', + items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}] + } + ], + [ + { + label: 'Setting 4', + items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}] + } + ] + ] } - ] + ] } } } + + +

Orientation

+

Default orientation is "horizontal" with "vertical" as the alternative.

+ +<MegaMenu :model="items" orientation="vertical" /> + + +

Custom Content

+

Any content inside the megamenu will be displayed on the right side by default. You may use ".p-megamenu-custom" style class to change the location of the content.

+ +

Properties

@@ -171,6 +177,12 @@ export default { array null An array of menuitems. + + + orientation + string + horizontal + Defines the orientation, valid values are horizontal and vertical. @@ -188,15 +200,27 @@ export default { - p-menubar + p-megamenu Container element. - p-menubar-root-list + p-megamenu-horizontal + Container element in horizontal orientation. + + + p-megamenu-vertical + Container element in vertical orientation. + + + p-megamenu-root-list Root list element. - p-submenu-list + p-megamenu-panel + Submenu container. + + + p-megamenu-submenu Submenu list element. @@ -214,25 +238,30 @@ export default { p-submenu-icon Arrow icon of a submenu. + + + p-megamenu-custom + Container of the default slot.

Dependencies

-

None.

+

PrimeFlex.

 - + View on GitHub @@ -242,132 +271,116 @@ export default { return { items: [ { - label:'File', - icon:'pi pi-fw pi-file', - items:[ - { - label:'New', - icon:'pi pi-fw pi-plus', - items:[ + label: 'Videos', icon: 'pi pi-fw pi-video', + items: [ + [ { - label:'Bookmark', - icon:'pi pi-fw pi-bookmark' + label: 'Video 1', + items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}] }, { - 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:'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: 'Video 2', + items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}] } - ] - } - ] - }, - { - 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: 'Video 3', + items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}] }, { - 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' + label: 'Video 4', + items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}] } - ] - } - ] + ] + ] }, { - label:'Quit', - icon:'pi pi-fw pi-power-off' + label: 'Users', icon: 'pi pi-fw pi-users', + items: [ + [ + { + label: 'User 1', + items: [{label: 'User 1.1'}, {label: 'User 1.2'}] + }, + { + label: 'User 2', + items: [{label: 'User 2.1'}, {label: 'User 2.2'}] + }, + ], + [ + { + label: 'User 3', + items: [{label: 'User 3.1'}, {label: 'User 3.2'}] + }, + { + label: 'User 4', + items: [{label: 'User 4.1'}, {label: 'User 4.2'}] + } + ], + [ + { + label: 'User 5', + items: [{label: 'User 5.1'}, {label: 'User 5.2'}] + }, + { + label: 'User 6', + items: [{label: 'User 6.1'}, {label: 'User 6.2'}] + } + ] + ] + }, + { + label: 'Events', icon: 'pi pi-fw pi-calendar', + items: [ + [ + { + label: 'Event 1', + items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}] + }, + { + label: 'Event 2', + items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}] + } + ], + [ + { + label: 'Event 3', + items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}] + }, + { + label: 'Event 4', + items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}] + } + ] + ] + }, + { + label: 'Settings', icon: 'pi pi-fw pi-cog', + items: [ + [ + { + label: 'Setting 1', + items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}] + }, + { + label: 'Setting 2', + items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}] + }, + { + label: 'Setting 3', + items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}] + } + ], + [ + { + label: 'Setting 4', + items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}] + } + ] + ] } - ] + ] } } } diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue index c7e9d7fda..2f9ebb3f9 100644 --- a/src/views/menubar/MenubarDoc.vue +++ b/src/views/menubar/MenubarDoc.vue @@ -151,6 +151,17 @@ export default { } } } + + +

Custom Content

+

Any content inside the megamenu will be displayed on the right side by default. You may use ".p-menubar-custom" style class to change the location of the content.

+ +

Properties