Avatar

Компонент Avatar предназначен для отображения пользовательских изображений, инициалов или иконок в компактном и визуально привлекательном виде. Он широко используется в интерфейсах для обозначения профилей пользователей, участников чата, комментариев или любых объектов, которым требуется визуальное представление.

Импорт и базовое использование

Для начала необходимо импортировать компонент из библиотеки:

import { NAvatar } from 'naive-ui';

Базовый пример использования:

В этом примере компонент отображает изображение, загруженное по ссылке. Если изображение не будет доступно, компонент может отображать альтернативный текст или инициал пользователя.

Свойства компонента

Компонент Avatar поддерживает множество свойств для кастомизации:

src (string) – URL изображения. Если отсутствует, можно использовать fallback или text.
size (number | ‘small’ | ‘medium’ | ‘large’) – размер аватара. Например, 40 для пикселей или 'medium'.
shape (‘circle’ | ‘square’) – форма аватара. По умолчанию используется круг.
color (string) – фон аватара, полезно при отображении инициалов или иконок.
text (string) – текст внутри аватара, например, инициалы пользователя.
icon (VNode | Component) – пользовательская иконка, если отсутствует изображение.
bordered (boolean) – наличие рамки вокруг аватара.
status (‘online’ | ‘offline’ | ‘busy’ | ‘away’) – индикатор статуса пользователя.
status-color (string) – цвет индикатора статуса при использовании пользовательского оттенка.

Пример с текстом и кастомным цветом:

Использование с иконками

Для замены изображения на иконку используется свойство icon. Например, интеграция с библиотекой иконок:

В этом примере вместо изображения отображается иконка UserIcon.

Аватар с индикатором статуса

Naive UI поддерживает отображение статуса пользователя с помощью маленького цветного кружка:

Если требуется задать пользовательский цвет для статуса:

Группы аватаров

Компонент AvatarGroup позволяет компактно отображать несколько аватаров в одной строке с наложением:

Ключевые моменты работы с AvatarGroup:

max – максимальное количество аватаров, отображаемых в группе; остальные отображаются как “+N”.
Поддерживает как изображения, так и текст или иконки.
Автоматически накладывает аватары друг на друга с небольшим смещением.

Размеры и адаптивность

Размер аватара можно задавать фиксированно через size или использовать предопределенные размеры:

'small' – 24px
'medium' – 32px
'large' – 40px

Также можно задавать кастомные размеры в пикселях или относительных единицах для адаптивного интерфейса:

Работа с fallback и загрузкой изображений

Если изображение недоступно или не загружено, можно указать текст или иконку, чтобы обеспечить корректное отображение:

Компонент автоматически отобразит текст или иконку при ошибке загрузки изображения.

Стилизация и кастомизация

Avatar легко кастомизировать через CSS-переменные или слоты:

--n-avatar-color – фон аватара
--n-avatar-text-color – цвет текста
--n-avatar-border-color – цвет рамки
--n-avatar-status-size – размер индикатора статуса
--n-avatar-status-color – цвет статуса

Пример кастомизации через CSS:

.n-avatar {
  --n-avatar-color: #ffcc00;
  --n-avatar-text-color: #fff;
  --n-avatar-border-color: #333;
}

Интеграция с формами и списками

Аватары часто используются в таблицах, списках и карточках пользователей:


  
    
    Пользователь 1
  
  
    
    Пользователь 2

Такой подход позволяет визуально разграничивать элементы и поддерживать единый стиль интерфейса.