Компонент Avatar для Angular | ng-hub-ui-avatar

Компонент avatar для Angular с инициалами, запасными изображениями, бейджами присутствия и CSS-переменными для переиспользуемых интерфейсов идентификации пользователя.

Интерактивные примеры

Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.

Источники аватаров

Получайте аватары из социальных профилей, пользовательских изображений, инициалов имени или пользовательского значения, с автоматическим fallback.

Профиль Facebook

Gravatar

Профиль GitHub

Пользовательский источник изображения

Инициалы имени

JD

Отображение значения

75%

Система fallback

Плавно деградируйте через каждый настроенный источник, пока не будет показано осмысленное представление.

Система fallback

Fallback Initials

Showing GitHub source (Facebook ID invalid)

Размеры

Управляйте размерами аватара, соотношением текста к размеру и количеством отображаемых инициалов.

Пользовательский размер

SD
RS
3.5rem
CS
calc(2rem + 12px)
PS
72 (pixels)

Соотношение размера текста

RD

Ограничение размера инициалов

JD

Стилизация

Форма, радиус углов, цвета, границы и произвольные inline-стили — всё управляется через inputs и CSS-переменные.

Круглый аватар

R

Радиус скругления углов

R

Цвет фона и переднего плана

C
Custom BG & FG (inputs)
TD
Themed via --hub-avatar-bg-color ([autoColor]="false")

Инициалы, которые всегда читаются

The automatic palette, as it paints today

Eight names, one per palette slot. Each avatar writes black or white on the colour its name hashed to, and the first ratio below it is read back from the two colours the browser actually painted. The second is what white initials would have scored on that same colour — what the component forced before 22.14.0, and what six of these eight would still be doing.

  • GH
    measuring…
  • AL
    measuring…
  • LT
    measuring…
  • BL
    measuring…
  • DK
    measuring…
  • AT
    measuring…
  • KT
    measuring…
  • AB
    measuring…

Those six are stated rather than shown on purpose: a row of white-on-yellow initials would be a page about readable labels printing six unreadable ones. An explicit fgColor does still win, contrast or not — that is how you pin the old look, and the snippet below is all it takes.

A palette the library has never seen

#ffcc00, #cccccc and #004080 — three colours the library ships no knowledge of. An application hands them to provideAvatar({ colors }) once at bootstrap; this demo scopes the same palette to its own avatars so it does not repaint the rest of the page. Either way the ink is derived from whatever colour ends up behind the text, so the guarantee travels with the background rather than with a list of approved pairings.

  • VR
    measuring…
  • IN
    measuring…
  • RP
    measuring…

Цвет границы

B

Пользовательские стили

S

Интерактивность

Реагируйте на взаимодействие пользователя через событие клика по аватару.

Обработчик события клика

CM
Click the avatar, or focus it and press Enter…

Группы и бейдж

Сложите аватары в группу и добавьте угловой бейдж — точку присутствия или счётчик — в цветах семантической палитры.

Отображение группы аватаров

A
B
C
+3

Бейдж (точка и счётчик)

AL
GH
AT
LT
CMF
4k
JD
9+

Свой контент

Поместите любую иконку, встроенный SVG, изображение или эмодзи внутрь аватара. Он центрируется, получает отступы и обрезается по форме аватара, масштабируется агностически (иконочные шрифты подстраиваются, SVG/изображения заполняют) и оформляется обычными входами bgColor / fgColor.

Свой контент (иконки, SVG)

🚀