Справочник API

Вот полный контракт avatar: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте avatar с помощью 19 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`size`	`string \| number`	`50`	Размер аватара в пикселях
`name`	`string`	—	Имя пользователя для генерации инициалов, когда источники изображений недоступны
`src`	`string \| SafeUrl`	—	URL основного пользовательского источника изображения для аватара
`alt`	`string`	—	Альтернативный текст изображения аватара для доступности
`round`	`boolean`	`true`	Должен ли аватар быть круглым (true) или следовать cornerRadius
`bgColor`	`string`	—	Цвет фона для текстовых аватаров. Генерируется автоматически, если не указан
`fgColor`	`string`	`#FFF`	Цвет текста инициалов в текстовых avatar
`borderColor`	`string`	—	Цвет рамки вокруг аватара
`cornerRadius`	`string \| number`	`0`	Радиус скругления углов, когда round равно false
`textSizeRatio`	`number`	`3`	Коэффициент для расчёта размера текста на основе размера аватара (size / textSizeRatio)
`initialsSize`	`string \| number`	`0`	Ограничивает количество отображаемых инициалов (0 = без ограничения)
`facebookId`	`string`	—	ID пользователя Facebook для изображения профиля (по возможности, могут действовать ограничения API)
`githubId`	`string`	—	Имя пользователя GitHub для получения изображения профиля
`gravatarId`	`string`	—	Email или MD5-хеш Gravatar для получения изображения профиля
`value`	`string`	—	Отображение пользовательского значения в качестве аватара (например, "75%", "+5")
`style`	`Partial<CSSStyleDeclaration>`	—	Пользовательские стили, применяемые к корневому элементу аватара
`referrerpolicy`	`string`	—	Политика referrer для изображения аватара (например, "no-referrer")
`badge`	`string \| number \| boolean \| null`	—	Угловой оверлей: `badge` / `[badge]="true"` → точка; `badge="4k"` → метка; null / отсутствует → ничего.
`badgeColor`	`HubAvatarBadgeColor \| string \| null`	—	Семантический цвет бейджа (primary · secondary · success · danger · warning · info · light · dark) → `--hub-sys-color-*`.

События

Реагируйте на то, что делает avatar, — 1 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`clickOnAvatar`	`Source`	Вызывается при клике по аватару, возвращает объект текущего активного источника

Шаблоны

Шаблоны пока не задокументированы.

CSS-переменные

Тематизируйте каждый пиксель с помощью 11 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.

Размер и компоновка

Управление размерами и отступами avatar

Переменная	По умолчанию	Тип	Описание
`--hub-avatar-size`	`50px`	length	Размер avatar по умолчанию, когда размер не указан `24px40px64px96px`
`--hub-avatar-border-radius`	`50%`	length	Радиус скругления контейнера avatar `04px8px50%`

Цвета и внешний вид

Настройка цветов и визуального вида avatar

Переменная	По умолчанию	Тип	Описание
`--hub-avatar-bg-color`	`var(--hub-sys-color-primary)`	color	Цвет фона текстовых avatar `#007bff#28a745#dc3545#6f42c1`
`--hub-avatar-text-color`	`#ffffff`	color	Цвет текста инициалов в текстовых avatar `#000000#ffffff#6c757d`
`--hub-avatar-border-color`	`transparent`	color	Цвет границы вокруг avatar `#dee2e6#007bff#28a745`
`--hub-avatar-border-width`	`0`	length	Ширина границы вокруг avatar `1px2px3px`

Типографика

Управление видом текста инициалов avatar

Переменная	По умолчанию	Тип	Описание
`--hub-avatar-font-family`	`Helvetica, Arial, sans-serif`	string	Семейство шрифтов для инициалов avatar `Inter, sans-serifRoboto, sans-serifsystem-ui`
`--hub-avatar-font-weight`	`normal`	string	Насыщенность шрифта для инициалов avatar `400500600bold`
`--hub-avatar-text-transform`	`uppercase`	string	Преобразование текста для инициалов `noneuppercaselowercasecapitalize`

Свой контент

Размер контента, проецируемого в аватар. Фон и передний план берутся из собственных токенов аватара.

Переменная	По умолчанию	Тип	Описание
`--hub-avatar-content-padding`	`calc(var(--hub-avatar-size) * 0.2)`	length	Отступ между проецируемым контентом и краем аватара. `8px15%calc(var(--hub-avatar-size) * 0.25)`
`--hub-avatar-content-icon-size`	`calc(var(--hub-avatar-size) * 0.55)`	length	Размер шрифта для проецируемых иконочных шрифтов / эмодзи (наследуется глифом). `1.5remcalc(var(--hub-avatar-size) * 0.6)`

Стилизация и тематизация

Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.