Исходник ↗Песочница ↗

Avatar

Компонент для отображения аватара пользователя — фотографии, инициалов или графики. Наследует все свойства HTML-элемента <img>.

Основные варианты

Изображение

Основной вариант, использует стандартный <img> под капотом.

Загружается...

Инициалы

Отображаются, если изображение не удалось загрузить или передано пустое свойство src.

Загружается...

Рекомендации по использованию инициалов:

  • рекомендуемая длина — не более 2 символов;
  • размер шрифта автоматически адаптируется под размер аватара.

Градиентный фон

Помимо стандартного фона инициалы можно размещать на градиентном фоне. Всего поддерживается 6 видов разных градиентов.

Загружается...

При необходимости можно использовать кастомный градиент (с помощью className/style):

<Avatar gradientColor="custom" style={{ backgroundImage: 'linear-gradient(...)' }} />

Размеры

Загружается...

Дополнительные элементы

Бейдж

Загружается...

Готовый пресет бейджа

Подкомпонент Avatar.BadgeWithPreset предоставляет готовые пресеты Avatar.Badge. При передаче в свойство preset значения online используется иконка Icon12Circle, а при значении online-mobile иконка Icon12OnlineMobile.

Загружается...

Иконка-заглушка

На случай, если картинка не смогла загрузиться, будет отображаться иконка-заглушка. Размер иконки-заглушки должен зависеть от размеров аватара.

Загружается...

Наложение

Загружается...

Вспомогательные функции

calcInitialsAvatarColor

Для динамического определения градиента под пользователя используйте функцию calcInitialsAvatarColor. Она генерирует значение градиента по формуле user_id % 6 + 1. Например, у пользователя с user_id={106} будет 5-й ("l-blue") цвет градиента.

import { calcInitialsAvatarColor } from '@vkontakte/vkui';
 
// userId определён где-то выше
<Avatar initials="ВК" gradientColor={calcInitialsAvatarColor(userId)} />;

Особенности

Компонент поддерживает следующие возможности:

  • автоматическая адаптация размера шрифта для инициалов;
  • поддержка всех стандартных HTML-атрибутов <img>;
  • сохранение пропорций изображения при изменении размеров.

Свойства и методы

Avatar

СвойствоОписание
elementTimingstring

Смотри https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/elementtiming ↗.

По умолчанию: -
fallbackIconReactElement<ImageBaseExpectedIconProps, string | JSXElementConstructor<any>>

Фолбек на случай, если картинка не прогрузилась.

По умолчанию: -
filterFilter

Пользовательское значения стиля filter Подробнее можно почитать в документации ↗.

По умолчанию: -
getRefRef<HTMLImageElement>
По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -
gradientColor1 | 2 | 3 | 4 | 5 | 6 | InitialsAvatarTextGradients | "custom"

Задаёт градиент для фона.

Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:

1: ‘red’ 2: ‘orange’ 3: ‘yellow’ 4: ‘green’ 5: ‘l-blue’ 6: ‘violet’.

По умолчанию: -
initialsstring

Инициалы пользователя.

По умолчанию: -
keepAspectRatioboolean

Флаг для сохранения пропорций картинки. Для корректной работы необходимо задать размеры хотя бы одной стороны картинки.

По умолчанию: -
noBorderboolean

Отключает обводку.

По умолчанию: -
objectFitObjectFit

Пользовательское значения стиля object-fit Подробнее можно почитать в документации ↗.

По умолчанию: -
objectPositionObjectPosition<string | number>

Пользовательское значения стиля object-position Подробнее можно почитать в документации ↗.

По умолчанию: -
sizeLiteralUnion<16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96, number>

Задаёт размер картинки.

Используйте размеры заданные дизайн-системой 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96.

По умолчанию: 48
withTransparentBackgroundboolean

Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.

По умолчанию: -

Avatar.Badge

СвойствоОписание
background"stroke" | "shadow"

Вид подложки под иконку.

  • "stroke" – имитирует вырез (⚠️ если фон под компонентом динамический, то ожидайте баг).
  • "shadow" – добавляет небольшую тень (⚠️ если фон под компонентом динамический, то ожидайте баг).
По умолчанию: -
childrenReactElement<ImageBaseExpectedIconProps, string | JSXElementConstructor<any>>

Принимает иконку.

По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -

Avatar.BadgeWithPreset

СвойствоОписание
getRootRefRef<HTMLDivElement>
По умолчанию: -
preset"online" | "online-mobile"

Использует предзаданные настройки.

За каждым пресетом закреплена своя иконка и стили.

По умолчанию: online

Avatar.Overlay

СвойствоОписание
childrenReactNode | ReactElement<ImageBaseExpectedIconProps, string | JSXElementConstructor<any>>

Принимает иконку.

По умолчанию: -
classNamestring

className для компонента.

По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -
onClickMouseEventHandler<HTMLElement>

Обработчик взаимодействия с элементом. По умолчанию сам компонент является интерактивным элементом. Передав значение равное 'undefined' или не передав этот параметр вовсе, можно отключить такое поведение, что дает возможность передавать отдельные интерактивные элементы в children.

По умолчанию: -
theme"dark" | "light"

Задаёт тему оформления.

По умолчанию: -
visibility"on-hover" | "always"

Определяет каким образом должен показываться оверлей.

  • "on-hover" – на наведение указателя мыши.
  • "always" – всегда показывать.
По умолчанию: -
Предыдущая
Accordion
Следующая
Badge