Overview
OverlayPanel displays a floating overlay panel anchored to a trigger element. Useful for displaying contextual content like forms, menus, or additional information.
Import
import { MagaryOverlayPanel } from 'ng-magary';
Basic Usage
<button (click)="panel.toggle($event)">Toggle Panel</button>
<magary-overlaypanel #panel>
<div class="p-4">
<h3>Panel Content</h3>
<p>This is the overlay panel content.</p>
</div>
</magary-overlaypanel>
With Close Icon
<button (click)="panel.toggle($event)">Show Panel</button>
<magary-overlaypanel
#panel
[showCloseIcon]="true"
[panelAriaLabel]="'User options'">
<div class="p-4">
<h3>Settings</h3>
<p>Configure your preferences</p>
</div>
</magary-overlaypanel>
Programmatic Control
import { Component, ViewChild } from '@angular/core';
import { MagaryOverlayPanel } from 'ng-magary';
@Component({
selector: 'app-example',
standalone: true,
imports: [MagaryOverlayPanel],
template: `
<button (click)="openPanel($event)">Open</button>
<button (click)="closePanel()">Close</button>
<magary-overlaypanel
#panel
(onShow)="handleShow()"
(onHide)="handleHide()">
<p>Panel content</p>
</magary-overlaypanel>
`
})
export class ExampleComponent {
@ViewChild('panel') panel!: MagaryOverlayPanel;
openPanel(event: Event) {
this.panel.show(event);
}
closePanel() {
this.panel.hide();
}
handleShow() {
console.log('Panel opened');
}
handleHide() {
console.log('Panel closed');
}
}
Whether clicking outside closes the panel
Show a close icon button in the panel
Close the panel when Escape key is pressed
panelAriaLabel
string
default:"'Overlay panel'"
Aria label for accessibility
Output Events
Callback to invoke when panel is shown
Callback to invoke when panel is hidden
Methods
Toggles the panel visibility
Features
- Smart positioning: Auto-adjusts to stay within viewport
- Animation: Smooth fade and scale transitions
- Click outside: Dismisses when clicking outside (configurable)
- Keyboard support: Closes with Escape key
- Focus management: Returns focus to trigger on close
- Scroll handling: Updates position on scroll/resize
Accessibility
- Uses
role="dialog" for screen readers
- Proper
aria-haspopup, aria-controls, and aria-expanded attributes
- Focus management with focus trap
- Keyboard navigation support
