Avatar

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

Основные свойства Avatar

  • src – строка с URL изображения. Если указано, отображается картинка вместо текста.
  • icon – иконка из набора Ant Design (<UserOutlined />, <MailOutlined /> и др.). Используется, когда нет изображения.
  • size – размер аватара. Может быть числом (например, 40) или строкой: 'small' | 'default' | 'large'.
  • shape – форма аватара: 'circle' (по умолчанию) или 'square'.
  • alt – альтернативный текст для изображения, полезен для SEO и доступности.
  • style – объект стилей CSS, позволяющий кастомизировать внешний вид (фон, цвет текста, границы).
  • className – пользовательский CSS-класс для дополнительной стилизации.

Пример базового использования:

import { Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';

<Avatar size="large" icon={<UserOutlined />} />
<Avatar src="https://example.com/avatar.png" />
<Avatar style={{ backgroundColor: '#f56a00' }}>U</Avatar>

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

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

  • Для одного символа текст выравнивается по центру.
  • Для двух символов автоматически уменьшается размер шрифта, чтобы текст не выходил за границы.
  • Для длинного текста рекомендуется использовать сокращение или инициализацию (например, первые буквы имени).
<Avatar>AB</Avatar>
<Avatar style={{ backgroundColor: '#7265e6' }}>CD</Avatar>

Настройка формы и размера

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

<Avatar shape="square" size={64} icon={<UserOutlined />} />
<Avatar shape="circle" size="small" src="https://example.com/avatar.png" />

Размеры:

  • small — 24px
  • default — 32px
  • large — 40px
  • пользовательский размер — любое число в пикселях

Аватары с иконками

Использование иконок особенно удобно для пустых пользователей или системных аккаунтов. Для этого подключается компонент Icon из @ant-design/icons.

import { MailOutlined } from '@ant-design/icons';

<Avatar icon={<MailOutlined />} />
<Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />

Сгруппированные аватары

Ant Design поддерживает Avatar.Group, позволяющий компактно отображать несколько аватаров рядом. Группировка полезна для чатов, списков участников и команд.

import { Avatar } from 'antd';

<Avatar.Group maxCount={3} size="large">
  <Avatar src="https://example.com/avatar1.png" />
  <Avatar src="https://example.com/avatar2.png" />
  <Avatar src="https://example.com/avatar3.png" />
  <Avatar>U</Avatar>
</Avatar.Group>
  • maxCount – количество аватаров, отображаемых явно. Остальные скрываются за индикатором +N.
  • maxStyle – стиль для индикатора скрытых аватаров.

Цвета и кастомизация фона

Аватар можно стилизовать с помощью свойства style. Чаще всего меняют фон и цвет текста, чтобы аватар соответствовал цветовой гамме интерфейса.

<Avatar style={{ backgroundColor: '#f56a00', color: '#fff' }}>U</Avatar>
<Avatar style={{ backgroundColor: '#7265e6', color: '#fff' }}>JD</Avatar>

Интеграция с Badge

Для отображения уведомлений или статуса пользователя аватар можно комбинировать с компонентом Badge. Это позволяет добавлять индикаторы онлайн/офлайн или количество непрочитанных сообщений.

import { Avatar, Badge } from 'antd';

<Badge count={5}>
  <Avatar src="https://example.com/avatar.png" />
</Badge>

<Badge dot>
  <Avatar icon={<UserOutlined />} />
</Badge>

Адаптация к темной и светлой теме

При использовании темной темы Ant Design стоит обратить внимание на контрастность цвета текста и фона аватара, чтобы символы оставались читаемыми. Используются стандартные цвета библиотеки или кастомные через style.

<Avatar style={{ backgroundColor: '#001529', color: '#fff' }}>AB</Avatar>

Автоматическое масштабирование текста

Когда в аватар передан текст, библиотека автоматически подбирает размер шрифта под размер аватара. Для точной настройки можно использовать свойство style с fontSize, но это редко требуется, так как встроенное масштабирование работает корректно в большинстве случаев.

<Avatar size={64} style={{ fontSize: 28 }}>JD</Avatar>

Практические советы

  • Для пользователей без фото лучше использовать инициалы или иконку UserOutlined.
  • В группах аватаров удобно ограничивать видимое количество с помощью maxCount.
  • Для динамических списков используйте src с URL, а для статических – иконки или текст.
  • При интеграции с Badge учитывайте размер индикатора относительно аватара, чтобы не нарушать визуальный баланс.

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

Оглавление