OverlayPanel OverlayPanel is a container component that can overlay other components on page.

Basic

Click the button to show the panel.

Galleria 1

Customized

This OverlayPanel gets displayed on hover of the icon, is not dismissable and displays a close icon.

Vin Year Brand Color {{car.vin}} {{car.year}} {{car.brand}} {{car.color}}

Table Integration

Vin Year Brand Color {{car.vin}} {{car.year}} {{car.brand}} {{car.color}}

Import


import {OverlayPanelModule} from 'primeng/overlaypanel';

Getting Started

OverlayPanel is defined using p-overlayPanel element and is displayed using the show or toggle method of a local ng-template variable.


<p-overlayPanel #op>
    Content
</p-overlayPanel>

<button type="text" pButton label="Basic" (click)="op.toggle($event)"></button>

Show and Hide

show method takes two parameters, first one is the event and it is mandatory. By default the target component to align the overlay is the event target, if you'd like to align it to another element, provide it as the second parameter. Similarly calling hide() hides the overlay panel and the toggle method toggles the visibility of the panel. In example below, clicking the button displays the overlayPanel aligned to the actualTarget div, not the button itself.


<p-overlayPanel #op>
    Content
</p-overlayPanel>

<button type="text" pButton label="Custom Target" (click)="op.show($event, actualTarget)"></button>
<div #actualTarget></div>

Dismissable and CloseIcon

Clicking outside the overlay hides the panel, setting dismissable to false disables this behavior. Additionally enablign showCloseIcon property displays a close icon at the top right corner to close the panel


<p-overlayPanel #op [dismissable]="true" [showCloseIcon]="true">
    Content
</p-overlayPanel>

Properties

Name Type Default Description
dismissable boolean true Enables to hide the overlay when outside is clicked.
showCloseIcon boolean false When enabled, displays a close icon at top right corner.
style string null Inline style of the component.
styleClass string null Style class of the component.
appendTo any null Target element to attach the panel, 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.

Events

Name Parameters Description
onShow - Callback to invoke when an overlay becomes visible.
onHide - Callback to invoke after overlay gets hidden.

Methods

Name Parameters Description
toggle event: browser event
target?: target element to align the panel, defaults to event.target
Toggles the visibility of the panel.
show event: browser event
target?: target element to align the panel to
Displays the panel.
hide - Hides the panel.

Styling

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

Name Element
ui-overlaypanel Container element.
ui-overlaypanel-content Content of the panel.
ui-overlaypanel-close Close icon.

Dependencies

None.

View on GitHub

<h3 class="first">Basic</h3>
<p>Click the button to show the panel.</p>
<button type="text" pButton label="Basic" (click)="op1.toggle($event)"></button>

<p-overlayPanel #op1>
    <img src="assets/showcase/images/demo/galleria/galleria1.jpg" alt="Galleria 1" />
</p-overlayPanel>

<h3>Customized</h3>
<p>This OverlayPanel gets displayed on hover of the icon, is not dismissable and displays a close icon.</p>
<i class="pi pi-search" (mouseenter)="op2.show($event)" style="font-size:24px"></i>

<p-overlayPanel #op2 [showCloseIcon]="true" [dismissable]="false">
    <p-table [value]="cars1" [style]="{width: '500px'}">
        <ng-template pTemplate="header">
            <tr>
                <th pSortableColumn="vin">Vin <p-sortIcon field="vin"></p-sortIcon></th>
                <th pSortableColumn="year">Year <p-sortIcon field="year"></p-sortIcon></th>
                <th pSortableColumn="brand">Brand <p-sortIcon field="brand"></p-sortIcon></th>
                <th pSortableColumn="color">Color <p-sortIcon field="color"></p-sortIcon></th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-car>
            <tr>
                <td>{{car.vin}}</td>
                <td>{{car.year}}</td>
                <td>{{car.brand}}</td>
                <td>{{car.color}}</td>
            </tr>
        </ng-template>
    </p-table>
</p-overlayPanel>

<h3>Table Integration</h3>
<p-table [value]="cars2">
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 4em"></th>
            <th>Vin</th>
            <th>Year</th>
            <th>Brand</th>
            <th>Color</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td>
                <button type="button" pButton (click)="selectCar($event,car,op3)" icon="pi pi-search"></button>
            </td>
            <td>{{car.vin}}</td>
            <td>{{car.year}}</td>
            <td>{{car.brand}}</td>
            <td>{{car.color}}</td>
        </tr>
    </ng-template>
</p-table>

<p-overlayPanel #op3>
    <img src="assets/showcase/images/demo/car/{{selectedCar.brand}}.png" *ngIf="selectedCar"/>
</p-overlayPanel>


export class OverlayPanelDemo {

    cars1: Car[];
    
    cars2: Car[];
    
    selectedCar: Car;
    
    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars1 = cars);
        this.carService.getCarsSmall().then(cars => this.cars2 = cars);
    }
    
    selectCar(event,car: Car, overlaypanel: OverlayPanel) {
        this.selectedCar = car;
        overlaypanel.toggle(event);
    }
}