export default {
data() {
@@ -142,6 +143,7 @@ export default {
}
+PanelMenu offers content customization with the item template that receives the menuitem instance from the model as a parameter.
@@ -152,11 +154,207 @@ export default { </template> </PanelMenu> + + +If the menuitem has a key defined, PanelMenu state can be controlled programmatically with the expandedKeys property that defines the keys + that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that expandedKeys also supports two-way binding with the v-model directive. +
+ +Example below expands and collapses all nodes with buttons.
+
+<div>
+ <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
+ <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+</div>
+<PanelMenu :model="items" v-model:expandedKeys="expandedKeys""></PanelMenu>
+
+
+
+
+export default {
+ data() {
+ return {
+ items: [{
+ key: '0',
+ label: 'File',
+ icon: 'pi pi-fw pi-file',
+ items: [{
+ key: '0_0',
+ label: 'New',
+ icon: 'pi pi-fw pi-plus',
+ items: [{
+ key: '0_0_0',
+ label: 'Bookmark',
+ icon: 'pi pi-fw pi-bookmark'
+ },
+ {
+ key: '0_0_1',
+ label: 'Video',
+ icon: 'pi pi-fw pi-video'
+ }
+ ]
+ },
+ {
+ key: '0_1',
+ label: 'Delete',
+ icon: 'pi pi-fw pi-trash'
+ },
+ {
+ key: '0_2',
+ label: 'Export',
+ icon: 'pi pi-fw pi-external-link'
+ }
+ ]
+ },
+ {
+ key: '1',
+ label: 'Edit',
+ icon: 'pi pi-fw pi-pencil',
+ items: [{
+ key: '1_0',
+ label: 'Left',
+ icon: 'pi pi-fw pi-align-left'
+ },
+ {
+ key: '1_1',
+ label: 'Right',
+ icon: 'pi pi-fw pi-align-right'
+ },
+ {
+ key: '1_2',
+ label: 'Center',
+ icon: 'pi pi-fw pi-align-center'
+ },
+ {
+ key: '1_3',
+ label: 'Justify',
+ icon: 'pi pi-fw pi-align-justify'
+ }
+ ]
+ },
+ {
+ key: '2',
+ label: 'Users',
+ icon: 'pi pi-fw pi-user',
+ items: [{
+ key: '2_0',
+ label: 'New',
+ icon: 'pi pi-fw pi-user-plus',
+
+ },
+ {
+ key: '2_1',
+ label: 'Delete',
+ icon: 'pi pi-fw pi-user-minus',
+ },
+ {
+ key: '2_2',
+ label: 'Search',
+ icon: 'pi pi-fw pi-users',
+ items: [{
+ key: '2_2_0',
+ label: 'Filter',
+ icon: 'pi pi-fw pi-filter',
+ items: [{
+ key: '2_2_0_0',
+ label: 'Print',
+ icon: 'pi pi-fw pi-print'
+ }]
+ },
+ {
+ key: '2_2_1',
+ icon: 'pi pi-fw pi-bars',
+ label: 'List'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ key: '3',
+ label: 'Events',
+ icon: 'pi pi-fw pi-calendar',
+ items: [{
+ key: '3_0',
+ label: 'Edit',
+ icon: 'pi pi-fw pi-pencil',
+ items: [{
+ key: '3_0_0',
+ label: 'Save',
+ icon: 'pi pi-fw pi-calendar-plus'
+ },
+ {
+ key: '3_0_0',
+ label: 'Delete',
+ icon: 'pi pi-fw pi-calendar-minus'
+ }
+ ]
+ },
+ {
+ key: '3_1',
+ label: 'Archieve',
+ icon: 'pi pi-fw pi-calendar-times',
+ items: [{
+ key: '3_1_0',
+ label: 'Remove',
+ icon: 'pi pi-fw pi-calendar-minus'
+ }]
+ }
+ ]
+ }
+ ],
+ expandedKeys: {}
+ }
+ },
+ methods: {
+ expandAll() {
+ for (let node of this.items) {
+ this.expandNode(node);
+ }
+
+ this.expandedKeys = {
+ ...this.expandedKeys
+ };
+ },
+ collapseAll() {
+ this.expandedKeys = {};
+ },
+ expandNode(node) {
+ if (node.items && node.items.length) {
+ this.expandedKeys[node.key] = true;
+
+ for (let child of node.items) {
+ this.expandNode(child);
+ }
+ }
+ }
+ }
+}
+
+
+In order to display some nodes as expanded by default, simply add their keys to the map.
+
+export default {
+ data() {
+ return {
+ items: //menu model instance,
+ expandedKeys: {}
+ }
+ },
+ mounted() {
+ this.expandedKeys[this.items[0.key]] = true;
+ }
+}
+
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
-array | null | An array of menuitems. | +|
expandedKeys | +array | +null | +A map of keys to represent the expansion state in controlled mode. |