Menu - ContextMenu - 《PrimeNG Document》

Documentation
Source

ContextMenuContextMenu displays an overlay menu on right click of its target. This page has two menus, one for the document and one for the image. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the components having a special integration.

Documentation

Import


import {ContextMenuModule} from 'primeng/contextmenu';
import {MenuItem} from 'primeng/api';

MenuModel API

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

Getting Started

ContextMenu requires nested menuitems as its model and in its simplest form ContextMenu is attached to the document with global setting. .


<p-contextMenu [global]="true" [model]="items"></p-contextMenu>

Target

ContextMenu can be attached to a particular element whose local template variable name is defined using the target property.


<p-contextMenu [target]="img" [model]="items2" ></p-contextMenu>
<img #img src="assets/showcase/images/primeng.svg" alt="Logo">

Exclusive Integrations

Some components like DataTable require special attention so they provide a different method to attach a context menu. Refer to individual documentation of components with special integration like DataTable.


export class ContextMenuDemo {
    private items: MenuItem[];
    ngOnInit() {
        this.items = [
            {
                label: 'File',
                items: [{
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            },
            {
                label: 'Edit',
                icon: 'pi pi-fw pi-pencil',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
                ]
            }
        ];
    }
}

Properties

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.
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.

Methods

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.

Styling

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

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

Dependencies

None.

Source

View on GitHub


<p-contextMenu [global]="true" [model]="items1"></p-contextMenu>
<p-contextMenu [target]="img" [model]="items2"></p-contextMenu>
<img #img src="assets/showcase/images/primeng-text.svg" alt="Logo">


export class ContextMenuDemo {
    items: MenuItem[];
    items2: MenuItem[];
    ngOnInit() {
        this.items1 = [
            {
                label: 'File',
                icon: 'pi pi-fw pi-file',
                items: [{
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {separator:true},
                    {label: 'Quit'}
                ]
            },
            {
                label: 'Edit',
                icon: 'pi pi-fw pi-pencil',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
                ]
            },
            {
                label: 'Help',
                icon: 'pi pi-fw pi-question',
                items: [
                    {
                        label: 'Contents'
                    },
                    {
                        label: 'Search', 
                        icon: 'pi pi-fw pi-search', 
                        items: [
                            {
                                label: 'Text', 
                                items: [
                                    {
                                        label: 'Workspace'
                                    }
                                ]
                            },
                            {
                                label: 'File'
                            }
                    ]}
                ]
            },
            {
                label: 'Actions',
                icon: 'pi pi-fw pi-cog',
                items: [
                    {
                        label: 'Edit',
                        icon: 'pi pi-fw pi-pencil',
                        items: [
                            {label: 'Save', icon: 'pi pi-fw pi-save'},
                            {label: 'Update', icon: 'pi pi-fw pi-save'},
                        ]
                    },
                    {
                        label: 'Other',
                        icon: 'pi pi-fw pi-tags',
                        items: [
                            {label: 'Delete', icon: 'pi pi-fw pi-minus'}
                        ]
                    }
                ]
            },
            {separator:true},
            {
                label: 'Quit', icon: 'pi pi-fw pi-times'
            }
        ];
        this.items2 = [
            {
                label: 'Next',
                icon: 'pi pi-fw pi-chevron-right'
            },
            {
                label: 'Prev',
                icon: 'pi pi-fw pi-chevron-left'
            }
        ];
    }
}