Компонент Avatar для Angular | ng-hub-ui-avatar
Компонент avatar для Angular с инициалами, запасными изображениями, бейджами присутствия и CSS-переменными для переиспользуемых интерфейсов идентификации пользователя.
Интерактивные примеры
Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.
Источники аватаров
Получайте аватары из социальных профилей, пользовательских изображений, инициалов имени или пользовательского значения, с автоматическим fallback.
Профиль Facebook
Gravatar
Профиль GitHub
Пользовательский источник изображения
Инициалы имени
Отображение значения
Система fallback
Плавно деградируйте через каждый настроенный источник, пока не будет показано осмысленное представление.
Система fallback
Showing GitHub source (Facebook ID invalid)
Размеры
Управляйте размерами аватара, соотношением текста к размеру и количеством отображаемых инициалов.
Пользовательский размер
Соотношение размера текста
Ограничение размера инициалов
Стилизация
Форма, радиус углов, цвета, границы и произвольные inline-стили — всё управляется через inputs и CSS-переменные.
Круглый аватар
Радиус скругления углов
Цвет фона и переднего плана
--hub-avatar-bg-color ([autoColor]="false")Цвет границы
Пользовательские стили
Интерактивность
Реагируйте на взаимодействие пользователя через событие клика по аватару.
Обработчик события клика
Группы и бейдж
Сложите аватары в группу и добавьте угловой бейдж — точку присутствия или счётчик — в цветах семантической палитры.
Отображение группы аватаров
Бейдж (точка и счётчик)
Свой контент
Поместите любую иконку, встроенный SVG, изображение или эмодзи внутрь аватара. Он центрируется, получает отступы и обрезается по форме аватара, масштабируется агностически (иконочные шрифты подстраиваются, SVG/изображения заполняют) и оформляется обычными входами bgColor / fgColor.
Свой контент (иконки, SVG)