Click the button to show the panel.
This OverlayPanel gets displayed on hover of the icon, is not dismissable and displays a close icon.
import {OverlayPanel} from 'primeng/primeng';
OverlayPanel is defined using p-overlayPanel element and is displayed using the show method of a local template variable.
<p-overlayPanel #op>
Content
</p-overlayPanel>
<button type="text" pButton label="Basic" (click)="op1.show($event)"></button>
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. 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)="op1.show($event, actualTarget)"></button>
<div #actualTarget></div>
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>
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. |
Name | Parameters | Description |
---|---|---|
onBeforeShow | - | Callback to invoke before overlay is shown. |
onAfterShow | - | Callback to invoke after overlay is shown. |
onBeforeShow | - | Callback to invoke before overlay is hidden. |
onAfterShow | - | Callback to invoke after overlay is hidden. |
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. |
Native component that only requires the css of PrimeUI OverlayPanel.
<h3 class="first">Basic</h3>
<p>Click the button to show the panel.</p>
<button type="text" pButton label="Basic" (click)="op1.show($event)"></button>
<p-overlayPanel #op1>
<img src="showcase/resources/demo/images/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="fa fa-search" (mouseenter)="op2.show($event)" style="font-size:24px"></i>
<p-overlayPanel #op2 [showCloseIcon]="true" [dismissable]="false">
<p-dataTable [value]="cars1" style="width:500px">
<p-column field="vin" header="Vin" [sortable]="true"></p-column>
<p-column field="year" header="Year" [sortable]="true"></p-column>
<p-column field="brand" header="Brand" [sortable]="true"></p-column>
<p-column field="color" header="Color" [sortable]="true"></p-column>
</p-dataTable>
</p-overlayPanel>
<h3>DataTable Integration</h3>
<p-dataTable [value]="cars2">
<p-column style="width:10%;text-align:center" header="Logo">
<template #car="rowData">
<button type="button" pButton (click)="selectCar($event,car,op3);" icon="fa-search"></button>
</template>
</p-column>
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color"></p-column>
</p-dataTable>
<p-overlayPanel #op3 [showCloseIcon]="true" [dismissable]="false">
<img src="showcase/resources/demo/images/car/{{selectedCar.brand}}-big.gif" *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.show(event);
}
}