Menu - PanelMenuPanelMenu is a hybrid of accordion-tree components.

PanelMenu - 图1

Documentation

Import

  2. import {PanelMenuModule} from 'primeng/panelmenu';
  3. import {MenuItem} from 'primeng/api';
  4.  

MenuModel API

PanelMenu uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

PanelMenu requires nested menuitems as its model.

  2. <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
  3.  
  2. export class PanelMenuDemo {
  4.     items: MenuItem[];
  6.     ngOnInit() {
  7.         this.items = [
  8.             {
  9.                 label: 'File',
  10.                 icon: 'pi pi-pw pi-file',
  11.                 items: [{
  12.                         label: 'New', 
  13.                         icon: 'pi pi-fw pi-plus',
  14.                         items: [
  15.                             {label: 'User', icon: 'pi pi-fw pi-user-plus'},
  16.                             {label: 'Filter', icon: 'pi pi-fw pi-filter'}
  17.                         ]
  18.                     },
  19.                     {label: 'Open', icon: 'pi pi-fw pi-external-link'},
  20.                     {separator: true},
  21.                     {label: 'Quit', icon: 'pi pi-fw pi-times'}
  22.                 ]
  23.             },
  24.             {
  25.                 label: 'Edit',
  26.                 icon: 'pi pi-fw pi-pencil',
  27.                 items: [
  28.                     {label: 'Delete', icon: 'pi pi-fw pi-trash'},
  29.                     {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
  30.                 ]
  31.             },
  32.             {
  33.                 label: 'Help',
  34.                 icon: 'pi pi-fw pi-question',
  35.                 items: [
  36.                     {
  37.                         label: 'Contents',
  38.                         icon: 'pi pi-pi pi-bars'
  39.                     },
  40.                     {
  41.                         label: 'Search', 
  42.                         icon: 'pi pi-pi pi-search', 
  43.                         items: [
  44.                             {
  45.                                 label: 'Text', 
  46.                                 items: [
  47.                                     {
  48.                                         label: 'Workspace'
  49.                                     }
  50.                                 ]
  51.                             },
  52.                             {
  53.                                 label: 'User',
  54.                                 icon: 'pi pi-fw pi-file',
  55.                             }
  56.                     ]}
  57.                 ]
  58.             },
  59.             {
  60.                 label: 'Actions',
  61.                 icon: 'pi pi-fw pi-cog',
  62.                 items: [
  63.                     {
  64.                         label: 'Edit',
  65.                         icon: 'pi pi-fw pi-pencil',
  66.                         items: [
  67.                             {label: 'Save', icon: 'pi pi-fw pi-save'},
  68.                             {label: 'Update', icon: 'pi pi-fw pi-save'},
  69.                         ]
  70.                     },
  71.                     {
  72.                         label: 'Other',
  73.                         icon: 'pi pi-fw pi-tags',
  74.                         items: [
  75.                             {label: 'Delete', icon: 'pi pi-fw pi-minus'}
  76.                         ]
  77.                     }
  78.                 ]
  79.             }
  80.         ];
  81.     }
  82. }
  83.  

Initial State

MenuItem has an expanded property to control the visibility of a submenu, you may use this property to control the state from the menumodel.

Animation Configuration

Transition of the toggle animation can be customized using the transitionOptions property with a default value as 400ms cubic-bezier(0.86, 0, 0.07, 1), example below disables the animation altogether.

  2.  <p-panelMenu [transitionOptions]="'0ms'" [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
  3.  

Properties

NameTypeDefaultDescription
modelarraynullAn array of menuitems.
stylestringnullInline style of the component.
styleClassstringnullStyle class of the component.
multiplebooleantrueWhether multiple tabs can be activated at the same time or not.
transitionOptionsstring400ms cubic-bezier(0.86, 0, 0.07, 1)Transition options of the animation.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
ui-panelmenuContainer element.
ui-panelmenu-headerAccordion header of root submenu.
ui-panelmenu-contentAccordion content of root submenu.
ui-menu-listList element.
ui-menuitemMenuitem element.
ui-menuitem-textLabel of a menuitem.
ui-menuitem-iconIcon of a menuitem.
ui-panelmenu-iconArrow icon of an accordion header.

Dependencies

None.

Source

View on GitHub

  2. <p-panelMenu [model]="items" [style]="{'width':'300px'}"></p-panelMenu>
  3.  
  2. export class PanelMenuDemo {
  4.     items: MenuItem[];
  6.     ngOnInit() {
  7.         this.items = [
  8.             {
  9.                 label: 'File',
  10.                 icon: 'pi pi-pw pi-file',
  11.                 items: [{
  12.                         label: 'New', 
  13.                         icon: 'pi pi-fw pi-plus',
  14.                         items: [
  15.                             {label: 'User', icon: 'pi pi-fw pi-user-plus'},
  16.                             {label: 'Filter', icon: 'pi pi-fw pi-filter'}
  17.                         ]
  18.                     },
  19.                     {label: 'Open', icon: 'pi pi-fw pi-external-link'},
  20.                     {separator: true},
  21.                     {label: 'Quit', icon: 'pi pi-fw pi-times'}
  22.                 ]
  23.             },
  24.             {
  25.                 label: 'Edit',
  26.                 icon: 'pi pi-fw pi-pencil',
  27.                 items: [
  28.                     {label: 'Delete', icon: 'pi pi-fw pi-trash'},
  29.                     {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
  30.                 ]
  31.             },
  32.             {
  33.                 label: 'Help',
  34.                 icon: 'pi pi-fw pi-question',
  35.                 items: [
  36.                     {
  37.                         label: 'Contents',
  38.                         icon: 'pi pi-pi pi-bars'
  39.                     },
  40.                     {
  41.                         label: 'Search', 
  42.                         icon: 'pi pi-pi pi-search', 
  43.                         items: [
  44.                             {
  45.                                 label: 'Text', 
  46.                                 items: [
  47.                                     {
  48.                                         label: 'Workspace'
  49.                                     }
  50.                                 ]
  51.                             },
  52.                             {
  53.                                 label: 'User',
  54.                                 icon: 'pi pi-fw pi-file',
  55.                             }
  56.                     ]}
  57.                 ]
  58.             },
  59.             {
  60.                 label: 'Actions',
  61.                 icon: 'pi pi-fw pi-cog',
  62.                 items: [
  63.                     {
  64.                         label: 'Edit',
  65.                         icon: 'pi pi-fw pi-pencil',
  66.                         items: [
  67.                             {label: 'Save', icon: 'pi pi-fw pi-save'},
  68.                             {label: 'Update', icon: 'pi pi-fw pi-save'},
  69.                         ]
  70.                     },
  71.                     {
  72.                         label: 'Other',
  73.                         icon: 'pi pi-fw pi-tags',
  74.                         items: [
  75.                             {label: 'Delete', icon: 'pi pi-fw pi-minus'}
  76.                         ]
  77.                     }
  78.                 ]
  79.             }
  80.         ];
  81.     }
  82. }
  83.