Angular Utility-Bibliothek | ng-hub-ui-utils
Angular Utility-Bibliothek mit Pipes, Fokusmanagement, Overlays, Transitions und Übersetzungs-Helfern, die von wiederverwendbaren UI-Komponenten gemeinsam genutzt werden.
Stile
CSS-Variablen
Gestalte jedes Pixel mit 19 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
Overlay & tooltip
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Standard | Typ | Beschreibung |
|---|---|---|---|
--hub-overlay-backdrop-zindex | calc(var(--hub-sys-zindex-dropdown, 1000) - 1) | number | Overlay backdrop z index |
--hub-overlay-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Overlay bg |
--hub-overlay-border-radius | var(--hub-sys-radius-sm, 0.25rem) | length | Overlay border radius |
--hub-overlay-shadow | var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)) | shadow | Overlay shadow |
--hub-overlay-zindex | var(--hub-sys-zindex-dropdown, 1000) | number | Overlay z index |
--hub-tooltip-bg | var(--hub-ref-color-black, #000) | color | Hintergrundfarbe des Tooltips. |
--hub-tooltip-border-radius | var(--hub-sys-radius-md, 0.375rem) | length | Eckenradius des Tooltips. |
--hub-tooltip-color | var(--hub-ref-color-white, #fff) | color | Textfarbe des Tooltips. |
--hub-tooltip-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Tooltip font family |
--hub-tooltip-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Schriftgröße des Tooltip-Textes. |
--hub-tooltip-font-weight | var(--hub-ref-font-weight-base, 400) | number | Tooltip font weight |
--hub-tooltip-line-height | var(--hub-ref-line-height-base, 1.5) | number | Maximale Breite, bevor der Text umbricht. |
--hub-tooltip-max-width | 200px | length | Tooltip max width |
--hub-tooltip-opacity | 0.9 | number | Deckkraft des angezeigten Tooltips. |
--hub-tooltip-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Horizontaler Innenabstand des Tooltips. |
--hub-tooltip-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Vertikaler Innenabstand des Tooltips. |
--hub-tooltip-shadow | none | shadow | Tooltip box shadow |
--hub-tooltip-transition-duration | 0.15s | transition | Dauer des Ein-/Ausblendens. |
--hub-tooltip-zindex | var(--hub-sys-zindex-tooltip, 1080) | number | Stapelreihenfolge des Tooltip-Elements. |