Angular Portal- und Overlay-Rendering | ng-hub-ui-portal
Angular Portal-Bibliothek zum dynamischen Rendern von Komponenten, Templates und Overlays außerhalb des aktuellen DOM-Baums mit Positionierungssteuerung.
API-Referenz
Hier ist der vollständige Vertrag für portal: 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 portal mit 15 Inputs ein. Binde sie wie jeden Angular-@Input.
| Name | Typ | Standard | Beschreibung |
|---|---|---|---|
animation | boolean | — | Wenn true, werden das Öffnen und Schließen des Portals animiert. Standard: true |
ariaLabelledBy | string | — | `aria-labelledby`-Attributwert, der am Portal-Fenster gesetzt wird |
ariaDescribedBy | string | — | `aria-describedby`-Attributwert, der am Portal-Fenster gesetzt wird |
beforeDismiss | () => boolean | Promise<boolean> | — | Callback unmittelbar bevor das Portal verworfen wird. Gib false zurück, um das Verwerfen zu verhindern. |
container | string | HTMLElement | — | Ein Selektor, der das Element angibt, an das alle neuen Portal-Fenster angehängt werden sollen. Wenn nicht angegeben, ist es `body`. |
injector | Injector | — | Der `Injector`, der für den Portal-Inhalt verwendet wird, um Dependency Injection zu ermöglichen. |
keyboard | boolean | — | Wenn true, wird das Portal geschlossen, wenn die Escape-Taste gedrückt wird. Standard: true |
scrollable | boolean | — | Scrollbarer Portal-Inhalt (standardmäßig false). |
windowClass | string | — | Eine benutzerdefinierte Klasse, die an das Portal-Fenster für individuelles Styling und Positionierung angehängt wird. |
portalDialogClass | string | — | Eine benutzerdefinierte Klasse, die an den Portal-Dialog-Container angehängt wird. |
portalContentClass | string | — | Eine benutzerdefinierte Klasse, die an den Portal-Inhalts-Wrapper angehängt wird. |
headerSelector | string | — | Benutzerdefinierter Selektor für das Header-Element des Portal-Fensters. Nützlich, um bestimmte Portal-Abschnitte anzusprechen. |
footerSelector | string | — | Benutzerdefinierter Selektor für das Footer-Element des Portal-Fensters. Nützlich, um bestimmte Portal-Abschnitte anzusprechen. |
dismissSelector | string | — | Benutzerdefinierter Selektor für Elemente, die das Verwerfen des Portal-Fensters auslösen können. Standard: `[data-dismiss="portal"]` |
closeSelector | string | — | Benutzerdefinierter Selektor für Elemente, die das Schließen des Portal-Fensters auslösen können. Standard: `[data-close="portal"]` |
Outputs
Noch keine Outputs dokumentiert.
Templates
Mach es zu deinem — 1 Template-Slots lassen dich eigenes Markup projizieren.
| Name | Beschreibung | Beispiel |
|---|---|---|
Portal Template | Template-Referenz, die an den HubPortal-Service für dynamisches Rendern übergeben werden kann | <ng-template #portalTemplate>
<div class="portal-content">
<div class="portal-header">
<h4>Portal Title</h4>
<button data-dismiss="portal">×</button>
</div>
<div class="portal-body">
Portal content goes here
</div>
<div class="portal-footer">
<button data-dismiss="portal">Cancel</button>
<button data-close="portal">OK</button>
</div>
</div>
</ng-template>
<!-- Open the portal -->
<button (click)="portal.open(portalTemplate)">Open Portal</button> |
CSS-Variablen
Gestalte jedes Pixel mit 15 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
Portal-Basisvariablen
Kern-Styling-Variablen für die Portal-Struktur und -Positionierung
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--portal-zindex | 1050 | number | Z-Index des Portal-Overlays |
--portal-padding | 1rem | length | Standard-Padding für den Portal-Inhalt |
--portal-margin | 0.5rem | length | Margin um den Portal-Dialog |
Portal-Erscheinungsbild
Variablen, die Portal-Farben, -Rahmen und visuelle Effekte steuern
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--portal-bg | #ffffff | color | Hintergrundfarbe des Portal-Inhalts |
--portal-color | #212529 | color | Textfarbe des Portal-Inhalts |
--portal-border-color | #dee2e6 | color | Rahmenfarbe des Portals |
--portal-border-width | 1px | border | Rahmenbreite des Portals |
--portal-border-radius | 0.375rem | border | Eckenradius der Portal-Ecken |
--portal-box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | Schlagschatten für die Portal-Erhebung |
Portal-Kopf- & Fußzeile
Styling-Variablen für die Header- und Footer-Abschnitte des Portals
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--portal-header-padding | 1rem | length | Padding des Portal-Headers |
--portal-header-border-color | #dee2e6 | color | Rahmenfarbe des Portal-Headers |
--portal-footer-padding | 1rem | length | Padding des Portal-Footers |
--portal-footer-border-color | #dee2e6 | color | Rahmenfarbe des Portal-Footers |
Hintergrund & Overlay
Variablen, die das Erscheinungsbild und Verhalten des Backdrops steuern
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--portal-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Hintergrundfarbe für das Portal-Backdrop |
--portal-backdrop-zindex | 1040 | number | Z-Index des Backdrops (muss niedriger als der Z-Index des Portals sein) |
Styling und Theming
Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.