Компонент Avatar для Angular | ng-hub-ui-avatar
Компонент avatar для Angular с инициалами, запасными изображениями, бейджами присутствия и CSS-переменными для переиспользуемых интерфейсов идентификации пользователя.
Обзор
Почему команды ищут эту библиотеку
Выбирайте этот компонент 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-переменные.
Примеры:
Круглый аватар
Круглый аватар
Радиус скругления углов
Радиус скругления углов
Цвет фона и переднего плана
Цвет фона и переднего плана
Цвет границы
Цвет границы
Пользовательские стили
Пользовательские стили
Интерактивность
Реагируйте на взаимодействие пользователя через событие клика по аватару.
Примеры:
Обработчик события клика
Обработчик события клика
Группы и бейдж
Сложите аватары в группу и добавьте угловой бейдж — точку присутствия или счётчик — в цветах семантической палитры.
Примеры:
Отображение группы аватаров
Отображение группы аватаров
Бейдж (точка и счётчик)
Бейдж (точка и счётчик)
Свой контент
Поместите любую иконку, встроенный SVG, изображение или эмодзи внутрь аватара. Он центрируется, получает отступы и обрезается по форме аватара, масштабируется агностически (иконочные шрифты подстраиваются, SVG/изображения заполняют) и оформляется обычными входами bgColor / fgColor.
Примеры:
Свой контент (иконки, SVG)
Свой контент (иконки, SVG)
Ключевые возможности
Последние изменения
Version 19.0.3 - 9/15/24, 12:00 AM
added: Comprehensive documentation page with functional examples