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

PanelMenu - 图1

Documentation

Import

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

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.

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

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.

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

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

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