Компонент Avatar для Angular | ng-hub-ui-avatar
Компонент avatar для Angular с инициалами, запасными изображениями, бейджами присутствия и CSS-переменными для переиспользуемых интерфейсов идентификации пользователя.
Последнее обновление 18 авг. 2026 г.
Обзор
Почему команды ищут эту библиотеку
Выбирайте этот компонент avatar для Angular, когда нужен устойчивый интерфейс идентификации пользователя с запасными вариантами, инициалами, несколькими источниками изображений и хуками стилизации, дружественными к дизайн-системам.
Установка
npm install ng-hub-ui-avatarПерейти к
Идеально для
- пользовательские меню
- списки команд
- ленты активности
- карточки профиля
О библиотеке avatar
ng-hub-ui-avatar помогает приложениям Angular последовательно отображать пользователей в меню, карточках профиля и совместных интерфейсах. Он покрывает распространённые крайние случаи, такие как отсутствующие изображения, генерация инициалов, индикаторы статуса и общие правила размеров.
Руководства по возможностям
Источники аватаров
Получайте аватары из социальных профилей, пользовательских изображений, инициалов имени или пользовательского значения, с автоматическим fallback.
Примеры:
Профиль Facebook
Профиль Facebook
Gravatar
Gravatar
Профиль GitHub
Профиль GitHub
Пользовательский источник изображения
Пользовательский источник изображения
Инициалы имени
Инициалы имени
Отображение значения
Отображение значения
Система fallback
Плавно деградируйте через каждый настроенный источник, пока не будет показано осмысленное представление.
Примеры:
Система fallback
Система fallback
Showing GitHub source (Facebook ID invalid)
Размеры
Управляйте размерами аватара, соотношением текста к размеру и количеством отображаемых инициалов.
Примеры:
Пользовательский размер
Пользовательский размер
Соотношение размера текста
Соотношение размера текста
Ограничение размера инициалов
Ограничение размера инициалов
Стилизация
Форма, радиус углов, цвета, границы и произвольные inline-стили — всё управляется через inputs и CSS-переменные.
Примеры:
Круглый аватар
Круглый аватар
Радиус скругления углов
Радиус скругления углов
Цвет фона и переднего плана
Цвет фона и переднего плана
--hub-avatar-bg-color ([autoColor]="false")Цвет границы
Цвет границы
Пользовательские стили
Пользовательские стили
Интерактивность
Реагируйте на взаимодействие пользователя через событие клика по аватару.
Примеры:
Обработчик события клика
Обработчик события клика
Группы и бейдж
Сложите аватары в группу и добавьте угловой бейдж — точку присутствия или счётчик — в цветах семантической палитры.
Примеры:
Отображение группы аватаров
Отображение группы аватаров
Бейдж (точка и счётчик)
Бейдж (точка и счётчик)
Свой контент
Поместите любую иконку, встроенный SVG, изображение или эмодзи внутрь аватара. Он центрируется, получает отступы и обрезается по форме аватара, масштабируется агностически (иконочные шрифты подстраиваются, SVG/изображения заполняют) и оформляется обычными входами bgColor / fgColor.
Примеры:
Свой контент (иконки, SVG)
Свой контент (иконки, SVG)
Ключевые возможности
Последние изменения
Version 22.9.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.9.0 - 7/28/26, 12:00 AM
changed: Accent resolution now imports the canonical resolveHubAccent from ng-hub-ui-utils. The private copy under src/lib/shared/resolve-hub-accent.ts has been deleted in favour of the single, tested implementation shared family-wide. Behaviour is identical (the copy had not diverged): a bareword resolves to var(--hub-sys-color-<name>, <name>), a literal colour passes through unchanged, an empty value yields null.
added: NEW peer dependency: ng-hub-ui-utils >=22.7.0. Consumers must have ng-hub-ui-utils installed alongside this library (it is where resolveHubAccent lives). Users installing via ng add ng-hub-ui-installer get it automatically; manual installs need npm i ng-hub-ui-utils.
Version 22.8.0 - 7/28/26, 12:00 AM
added: interactive input: exposes role=button, focusability and Enter/Space activation for avatars that bind (clickOnAvatar) — the click target used to be mouse-only.
Version 22.6.0 - 7/7/26, 12:00 AM
added: autoColor input — set [autoColor]="false" on an initials avatar to suppress the inline hash background so it can be themed via the --hub-avatar-bg-color CSS variable (no !important). Defaults to true; an explicit bgColor still wins.
Version 22.5.0 - 6/30/26, 12:00 AM
added: Standalone AvatarComponent — import it directly (no NgModule) and configure with the new provideAvatar() environment provider.
deprecated: AvatarModule / AvatarModule.forRoot() — kept for backward compatibility (now re-exporting the standalone component); use AvatarComponent + provideAvatar() instead.