Перейти к содержимому

CoreAvatar

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

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

Инициалы — не криптограмма для скринридера: корень становится картинкой (role="img") с полным именем — читается «Айдана Сакенова», а не «АС». Картинка рендерится через NuxtImg (lazy, object-fit: cover); ошибка загрузки (включая 404) переключает на инициалы. Alt при переданном src обязателен: без явного текста подставляется локализованное «Аватар {name}» (i18n coreAvatar.avatar), пустой alt делает аватар декоративным.

Размер — число в px (по умолчанию 40, инициалы ≈40% стороны) или CSS-длина ('1.5em') — аватар масштабируется вместе с окружающим текстом. Формы: circle и square (скруглённый квадрат). Обводки: bordered — статичная 2px цветом границы; flowBorder — фирменная градиентная обводка (пара --avatar-flow-a/-b, полная замена — --avatar-flow-image); при prefers-reduced-motion градиент статичен.

Базовые — картинка, инициалы, без avatar
Аватар с логотипом
Аватар Айдана Сакенова
Формы и размеры
Крупный аватар с логотипом
bordered — обводка цветом границы
Обводка на картинке
flow-border — градиентная обводка (пара перекрывается --avatar-flow-a/-b)
Перелив на картинке