TieredMenu

Многоуровневое меню отображает подменю во вложенных оверлеях.

С чего начать

Подключите модуль

import {TieredMenuModule} from 'primeng/tieredmenu';

В .ts файле

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { MenuItem } from 'primeng/api';
 
@Component({
  selector: 'app-prime-tiered-menu',
  templateUrl: './prime-tiered-menu.component.html',
  styleUrls: ['./prime-tiered-menu.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PrimeTieredMenuComponent implements OnInit {
  constructor() {}
 
  items: MenuItem[] = [];
 
  ngOnInit() {
    this.items = [
      {
        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',
          },
          {
            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: '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',
              },
            ],
          },
        ],
      },
      {
        separator: true,
      },
      {
        label: 'Quit',
        icon: 'pi pi-fw pi-power-off',
      },
    ];
  }
}

Встройте компонент с помощью тэга p-tieredMenu.

<p-tieredMenu [model]="items"></p-tieredMenu>

Inline

<p-tieredMenu [model]="items"></p-tieredMenu>

Popup

Свойства

Name	Type	Default	Description
model	array	null	An array of menuitems.
popup	boolean	false	Defines if menu would displayed as a popup.
appendTo	any	null	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
autoDisplay	boolean	false	Whether to show a root submenu on mouse over.
showTransitionOptions	string	.12s cubic-bezier(0, 0, 0.2, 1)	Transition options of the show animation.
hideTransitionOptions	string	.1s linear	Transition options of the hide animation.

Методы

Name	Parameters	Description
toggle	event: browser event	Toggles the visibility of the popup menu.
show	event: browser event	Displays the popup menu.
hide	-	Hides the popup menu.

Стилизация

Name	Element
p-tieredmenu	Container element.
p-menu-list	List element.
p-menuitem	Menuitem element.
p-menuitem-text	Label of a menuitem.
p-menuitem-icon	Icon of a menuitem.
p-submenu-icon	Arrow icon of a submenu.

Tag Toast