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.
Stile
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) |