Overlay

Überblick

mmm-overlay ist ein leichtgewichtiger Wrapper um Angular CDK Connected Overlay. Die Komponente eignet sich für Menüs, Popover, Picker und kontextbezogene Zusatzinhalte.

Inputs

Input	Typ	Beschreibung
origin	CdkOverlayOrigin	Referenzelement für die Positionierung
open	boolean	Öffnet oder schliesst das Overlay
closeOnEscape	boolean	Schliesst bei Escape
hasBackdrop	boolean	Aktiviert den Backdrop
panelClass	string | string[]	CSS-Klassen für das Overlay-Panel
backdropClass	string | string[]	CSS-Klassen für den Backdrop
offsetY	number	Vertikaler Offset
offsetX	number	Horizontaler Offset

Outputs

Output	Typ	Beschreibung
requestClose	EventEmitter<void>	Signalisiert, dass das Overlay geschlossen werden soll

SCSS-Variablen

• --mmm-overlay-bg
• --mmm-overlay-border-radius
• --mmm-overlay-padding
• --mmm-overlay-shadow

Hinweise

• Die Komponente verwaltet den Open-State nicht selbst.
• Das konsumierende Element entscheidet, wie requestClose verarbeitet wird.
• Durch panelClass und backdropClass kann das Overlay gezielt erweitert werden.

Beispiel

<div cdkOverlayOrigin #origin="cdkOverlayOrigin">
  <button type="button" (click)="open = !open">Overlay toggeln</button>
</div>

<mmm-overlay
  [origin]="origin"
  [open]="open"
  (requestClose)="open = false"
>
  <div>Overlay-Inhalt</div>
</mmm-overlay>

Overlay toggeln

Overlay-Inhalt