Angular Avatar-Komponente | ng-hub-ui-avatar
Angular Avatar-Komponente mit Initialen, Fallback-Bildern, Präsenz-Badges und CSS-Variablen für wiederverwendbare Oberflächen zur Benutzeridentität.
Stile
Mixins und Stile
Override any of the `--hub-avatar-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults.
Theming with hub-avatar-theme
AL
GH
| Mixin | Parameter | Beschreibung |
|---|---|---|
| Theming | ||
hub-avatar-theme() | $size--hub-avatar-size$border-radius--hub-avatar-border-radius$border-width--hub-avatar-border-width$border-color--hub-avatar-border-color$bg--hub-avatar-bg-color$fg--hub-avatar-fg-color$object-fit--hub-avatar-object-fit$font-family--hub-avatar-font-family$font-weight--hub-avatar-font-weight$font-size--hub-avatar-font-size$text-transform--hub-avatar-text-transform$content-padding--hub-avatar-content-padding$content-icon-size--hub-avatar-content-icon-size$badge-size--hub-avatar-badge-size$badge-offset--hub-avatar-badge-offset$badge-ring-width--hub-avatar-badge-ring-width$badge-ring-color--hub-avatar-badge-ring-color$badge-color--hub-avatar-badge-color$badge-text-color--hub-avatar-badge-text-color$badge-font-size--hub-avatar-badge-font-size$badge-padding--hub-avatar-badge-padding$group-overlap--hub-avatar-group-overlap$group-ring-width--hub-avatar-group-ring-width$group-ring-color--hub-avatar-group-ring-color | One-call token theming for `hub-avatar-theme`. |
CSS-Variablen
Gestalte jedes Pixel mit 29 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
Avatar
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-avatar-overflow | hidden | string | Overflow clipping behavior for avatar container |
--hub-avatar-border-radius-round | 50% | length | Round shape radius token |
--hub-avatar-border-radius-square | var(--hub-ref-radius-sm, 0.25rem) | length | Default square shape radius token |
--hub-avatar-border-radius | var(--hub-avatar-border-radius-round, var(--hub-avatar-border-radius-square, 0.25rem)) | length | Rahmenradius für den Avatar-Container |
--hub-avatar-border-width-default | var(--hub-ref-border-width, 1px) | length | Default border width when border is enabled |
--hub-avatar-border-width | 0 | length | Rahmenbreite um den Avatar |
--hub-avatar-border-color | transparent | color | Rahmenfarbe um den Avatar |
--hub-avatar-fg-color | var(--hub-avatar-accent-on, var(--hub-ref-color-white, #fff)) | color | Schriftfarbe für Initialen in Text-Avataren |
--hub-avatar-bg-color | var(--hub-avatar-accent, var(--hub-sys-color-primary, #0d6efd)) | color | Hintergrundfarbe für Text-Avatare |
--hub-avatar-font-family | var( --hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif ) | string | Schriftfamilie für Avatar-Initialen |
--hub-avatar-font-weight | var(--hub-ref-font-weight-base, 400) | number | Schriftstärke für Avatar-Initialen |
--hub-avatar-font-size | calc(var(--hub-avatar-size, 50px) / 3) | length | Avatar text font size |
--hub-avatar-line-height | var(--hub-avatar-size, 50px) | number | Avatar text line-height token |
--hub-avatar-text-transform | uppercase | string | Texttransformation für Initialen |
--hub-avatar-text-align | center | string | Avatar text alignment |
--hub-avatar-object-fit | cover | string | Avatar image object-fit token |
--hub-avatar-content-padding | calc(var(--hub-avatar-size, 50px) * 0.2) | length | Abstand zwischen dem projizierten Inhalt und dem Avatar-Rand. |
--hub-avatar-content-icon-size | calc(var(--hub-avatar-size, 50px) * 0.55) | length | Schriftgröße für projizierte Icon-Fonts / Emoji (wird vom Glyph geerbt). |
--hub-avatar-badge-size | calc(var(--hub-avatar-size, 50px) * 0.28) | length | Badge dot diameter / label min-height (scales with size) |
--hub-avatar-badge-offset | 0px | length | Badge inset from the bottom-end corner |
--hub-avatar-badge-ring-width | max(2px, calc(var(--hub-avatar-size, 50px) * 0.05)) | length | Ring around the badge (separates it from the avatar) |
--hub-avatar-badge-ring-color | var(--hub-sys-surface-page, #fff) | color | Badge ring colour |
--hub-avatar-badge-color | var(--hub-sys-color-secondary, #6c757d) | color | Badge fill (neutral default; pick a semantic colour with the badgeColor input → --hub-sys-color-*) |
--hub-avatar-badge-text-color | var(--hub-ref-color-white, #fff) | color | Badge label text colour |
--hub-avatar-badge-font-size | calc(var(--hub-avatar-size, 50px) * 0.22) | length | Badge label font size |
--hub-avatar-badge-padding | calc(var(--hub-avatar-size, 50px) * 0.08) | length | Badge label inline padding |
--hub-avatar-group-overlap | calc(var(--hub-avatar-size, 50px) * 0.3) | string | Overlap amount between stacked avatars in .hub-avatar-group |
--hub-avatar-group-ring-width | max(2px, calc(var(--hub-avatar-size, 50px) * 0.04)) | length | Ring width on each avatar inside a group |
--hub-avatar-group-ring-color | var(--hub-sys-surface-page, #fff) | color | Ring colour on each avatar inside a group |