Компонент Avatar для Angular | ng-hub-ui-avatar
Компонент avatar для Angular с инициалами, запасными изображениями, бейджами присутствия и CSS-переменными для переиспользуемых интерфейсов идентификации пользователя.
Стили
Миксины и стили
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
| Миксин | Параметры | Описание |
|---|---|---|
| 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-переменные
Тематизируйте каждый пиксель с помощью 29 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
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.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--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 | Радиус скругления контейнера 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 | Ширина границы вокруг avatar |
--hub-avatar-border-color | transparent | color | Цвет границы вокруг avatar |
--hub-avatar-fg-color | var(--hub-avatar-accent-on, var(--hub-ref-color-white, #fff)) | color | Цвет текста инициалов в текстовых avatar |
--hub-avatar-bg-color | var(--hub-avatar-accent, var(--hub-sys-color-primary, #0d6efd)) | color | Цвет фона текстовых avatar |
--hub-avatar-font-family | var( --hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif ) | string | Семейство шрифтов для инициалов avatar |
--hub-avatar-font-weight | var(--hub-ref-font-weight-base, 400) | number | Насыщенность шрифта для инициалов 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 | Преобразование текста для инициалов |
--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 | Отступ между проецируемым контентом и краем аватара. |
--hub-avatar-content-icon-size | calc(var(--hub-avatar-size, 50px) * 0.55) | length | Размер шрифта для проецируемых иконочных шрифтов / эмодзи (наследуется глифом). |
--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 |