Composant Avatar Angular | ng-hub-ui-avatar
Composant avatar Angular avec initiales, images de repli, badges de présence et variables CSS pour des interfaces réutilisables d'identité utilisateur.
Styles
Mixins et styles
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 | Paramètres | Description |
|---|---|---|
| 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`. |
Variables CSS
Personnalisez chaque pixel avec 29 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
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 | Par défaut | Type | Description |
|---|---|---|---|
--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 | Rayon de bordure du conteneur de l'avatar. |
--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 | Largeur de la bordure autour de l'avatar. |
--hub-avatar-border-color | transparent | color | Couleur de la bordure autour de l'avatar. |
--hub-avatar-fg-color | var(--hub-avatar-accent-on, var(--hub-ref-color-white, #fff)) | color | Couleur du texte des initiales dans les avatars textuels. |
--hub-avatar-bg-color | var(--hub-avatar-accent, var(--hub-sys-color-primary, #0d6efd)) | color | Couleur d'arrière-plan des avatars textuels. |
--hub-avatar-font-family | var( --hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif ) | string | Famille de police des initiales de l'avatar. |
--hub-avatar-font-weight | var(--hub-ref-font-weight-base, 400) | number | Graisse de police des initiales de l'avatar. |
--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 | Transformation du texte pour les initiales. |
--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 | Espace entre le contenu projeté et le bord de l'avatar. |
--hub-avatar-content-icon-size | calc(var(--hub-avatar-size, 50px) * 0.55) | length | Taille de police pour les icônes de police / emoji projetés (héritée par le glyphe). |
--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 |