API-Referenz

Hier ist der vollständige Vertrag für modal: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle modal mit 14 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`animation`	`boolean`	—	Wenn true, werden das Öffnen und Schließen des Modals animiert. Standard: true
`backdrop`	`boolean \| "static"`	—	Wenn true, wird das Backdrop-Element erstellt. Alternativ kann "static" für ein Backdrop angegeben werden, das das Modal beim Klicken nicht schließt. Standard: true
`centered`	`boolean`	—	Wenn true, wird das Modal vertikal zentriert. Standard: false
`placement`	`HubModalPlacement`	—	Steuert, wo das Modal im Viewport platziert wird. Standard: HubModalPlacement.Center
`keyboard`	`boolean`	—	Wenn true, wird das Modal geschlossen, wenn die Escape-Taste gedrückt wird. Standard: true
`closeOnNavigation`	`boolean`	—	Wenn true, wird das Modal geschlossen, wenn der Benutzer im Browserverlauf zurücknavigiert (history.back(), Zurück-Schaltfläche des Browsers). Standard: true
`size`	`"sm" \| "lg" \| "xl" \| string`	—	Größe des Modal-Fensters
`windowClass`	`string`	—	Eine benutzerdefinierte Klasse, die an das Modal-Fenster angehängt wird
`backdropClass`	`string`	—	Eine benutzerdefinierte Klasse, die an das Modal-Backdrop angehängt wird
`dismissSelector`	`string`	—	Benutzerdefinierter Selektor für Elemente, die das Verwerfen des Modalfensters auslösen können. Standard: "[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	Benutzerdefinierter Selektor für Elemente, die das Schließen des Modalfensters auslösen können. Standard: "[data-close=\"modal\"]"
`headerSelector`	`string`	—	Benutzerdefinierter Selektor für das Header-Element des Modal-Fensters
`footerSelector`	`string`	—	Benutzerdefinierter Selektor für das Footer-Element des Modal-Fensters
`data`	`any`	—	Zusätzliche Daten, die an das Modal-Fenster übergeben werden müssen, wenn es geöffnet wird

Outputs

Noch keine Outputs dokumentiert.

Templates

Mach es zu deinem — 1 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`Modal Template`	Template-Referenz, die an den Modal-Service übergeben werden kann	`<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal content goes here </div> <div class="modal-footer"> <button class="btn btn-secondary" (click)="dismiss()">Cancel</button> <button class="btn btn-primary" (click)="close('result')">OK</button> </div> </ng-template>`

CSS-Variablen

Gestalte jedes Pixel mit 17 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.

Modal-Basisvariablen

Grundlegende Styling-Variablen für Modal-Struktur und -Positionierung

Variable	Standard	Typ	Beschreibung
`--bs-modal-zindex`	`1055`	number	Z-Index des Modals
`--bs-modal-width`	`500px`	length	Standardbreite des Modals
`--bs-modal-padding`	`1rem`	length	Padding um den Modal-Inhalt
`--bs-modal-margin`	`0.5rem`	length	Margin um den Modal-Dialog

Modal-Darstellung

Variablen zur Steuerung von Modal-Farben, -Rändern und visuellen Effekten

Variable	Standard	Typ	Beschreibung
`--bs-modal-color`	`var(--bs-body-color)`	color	Textfarbe des Modal-Inhalts
`--bs-modal-bg`	`var(--bs-body-bg)`	color	Hintergrundfarbe des Modal-Inhalts
`--bs-modal-border-color`	`var(--bs-border-color-translucent)`	color	Rahmenfarbe des Modals
`--bs-modal-border-width`	`var(--bs-border-width)`	border	Rahmenbreite des Modals
`--bs-modal-border-radius`	`var(--bs-border-radius-lg)`	border	Eckenradius des Modals
`--bs-modal-box-shadow`	`0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)`	shadow	Schlagschatten des Modals

Modal-Header

Styling-Variablen für den Modal-Header-Bereich

Variable	Standard	Typ	Beschreibung
`--bs-modal-header-padding-x`	`1rem`	length	Horizontales Padding des Modal-Headers
`--bs-modal-header-padding-y`	`1rem`	length	Vertikales Padding des Modal-Headers
`--bs-modal-header-border-color`	`var(--bs-border-color)`	color	Rahmenfarbe des Modal-Headers
`--bs-modal-header-border-width`	`0 0 var(--bs-border-width) 0`	border	Rahmenbreite des Modal-Headers

Modal-Footer

Styling-Variablen für den Modal-Footer-Bereich

Variable	Standard	Typ	Beschreibung
`--bs-modal-footer-gap`	`0.5rem`	length	Abstand zwischen Elementen im Modal-Footer
`--bs-modal-footer-border-color`	`var(--bs-border-color)`	color	Rahmenfarbe des Modal-Footers
`--bs-modal-footer-border-width`	`var(--bs-border-width) 0 0 0`	border	Rahmenbreite des Modal-Footers

Styling und Theming

Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.