Контекстное меню

PrimeNG/ContextMenu (opens in a new tab)

Компонент отображает всплывающее меню при щелчке правой кнопкой мыши по его цели.

С чего начать

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

import { ContextMenuModule } from 'primeng/contextmenu';

В .ts файле

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';
 
@Component({
  selector: 'app-prime-contextmenu',
  templateUrl: './prime-contextmenu.component.html',
  styleUrls: ['./prime-contextmenu.component.scss']
})
export class PrimeContextmenuComponent implements OnInit {
 
  constructor() { }
 
  items: MenuItem[] = [];
 
  ngOnInit(): void {
    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-contextMenu.

<img #img src="http://via.placeholder.com/640x360" alt="Logo" aria-haspopup="true">
<p-contextMenu [target]="img" [model]="items"></p-contextMenu>

ContextMenu

<img #img src="https://primefaces.org/cdn/primeng/images/demo/nature/nature3.jpg" alt="Logo" aria-haspopup="true">
<p-contextMenu appendTo="body" [target]="img" [model]="items"></p-contextMenu>

Свойства

Name	Type	Default	Description
model	array	null	An array of menuitems.
global	boolean	false	Attaches the menu to document instead of a particular item.
target	string	null	Local template variable name of the element to attach the context menu.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
appendTo	any	null	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
triggerEvent	string	contextmenu	Event for which the menu must be displayed.

События

Name	Parameters	Description
onShow	-	Callback to invoke when context menu is shown.
onHide	-	Callback to invoke when context menu is hidden.

Методы

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

Стилизация

Name	Element
p-contextmenu	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.

Confirmdialog DataView