Avatar и AvatarGroup

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

import { Avatar } from '@chakra-ui/react';

<Avatar name="Иван Иванов" src="https://bit.ly/broken-link" />

Свойства Avatar

  • name — строка с именем пользователя. Используется для генерации инициалов, если изображение не задано.
  • src — URL изображения для отображения аватара.
  • size — размер аватара. Возможные значения: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl". Размер влияет на ширину, высоту и шрифт инициалов.
  • showBorder — отображение рамки вокруг аватара.
  • borderColor и borderWidth — стиль рамки.
  • icon — кастомная иконка, отображаемая вместо изображения или инициалов.
<Avatar
  name="Мария Петрова"
  size="lg"
  borderColor="blue.500"
  borderWidth="2px"
/>

Автоматическая генерация инициалов

Если src не задан или изображение не загружается, Chakra UI автоматически создаёт инициал пользователя на основе name. Это удобно для списка контактов, где не у всех есть изображения.

<Avatar name="Сергей Кузнецов" />

Стилизация и тема

Avatar наследует стили из темы Chakra UI. Можно менять цвет фона, цвет текста и размеры через объект темы:

const theme = extendTheme({
  components: {
    Avatar: {
      baseStyle: {
        borderRadius: 'full',
        bg: 'gray.300',
        color: 'white',
      },
      sizes: {
        lg: {
          width: '80px',
          height: '80px',
          fontSize: '2xl',
        },
      },
    },
  },
});

Компонент AvatarGroup

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

import { Avatar, AvatarGroup } from '@chakra-ui/react';

<AvatarGroup size="md" max={3}>
  <Avatar name="Анна Смирнова" src="https://bit.ly/anna-smirnova" />
  <Avatar name="Павел Иванов" src="https://bit.ly/pavel-ivanov" />
  <Avatar name="Елена Кузнецова" src="https://bit.ly/elena-kuznetsova" />
  <Avatar name="Дмитрий Орлов" />
</AvatarGroup>

Свойства AvatarGroup

  • size — размер всех аватаров в группе.
  • max — максимальное количество аватаров, которые будут показаны. Если элементов больше, отображается последний аватар с надписью вида +N.
  • spacing — расстояние между аватарами. Отрицательные значения создают эффект наложения.

Эффект наложения

По умолчанию аватары в AvatarGroup немного перекрывают друг друга, создавая компактный вид. Это регулируется через свойство spacing:

<AvatarGroup spacing="-4">
  <Avatar name="Игорь" />
  <Avatar name="Людмила" />
  <Avatar name="Олег" />
</AvatarGroup>

Кастомизация через тему

В теме можно настроить базовый стиль и размеры для группы аватаров:

const theme = extendTheme({
  components: {
    Avatar: {
      baseStyle: {
        borderRadius: 'full',
        bg: 'teal.500',
      },
      sizes: {
        sm: { width: '30px', height: '30px', fontSize: 'sm' },
        md: { width: '40px', height: '40px', fontSize: 'md' },
      },
    },
    AvatarGroup: {
      baseStyle: {
        spacing: '-2',
      },
    },
  },
});

Практические примеры использования

  1. Список участников команды
<AvatarGroup size="md" max={5}>
  {teamMembers.map(member => (
    <Avatar key={member.id} name={member.name} src={member.avatar} />
  ))}
</AvatarGroup>
  1. Комментарии с авторами
<Comment>
  <Avatar name={comment.author} src={comment.avatar} size="sm" />
  <Text>{comment.text}</Text>
</Comment>
  1. Отображение дополнительных участников

Если участников больше, чем значение max, Chakra UI автоматически показывает количество скрытых участников:

<AvatarGroup size="md" max={2}>
  <Avatar name="Алексей" />
  <Avatar name="Наталья" />
  <Avatar name="Сергей" />
</AvatarGroup>
// Результат: два аватара + "+1"

Доступность и семантика

Avatar и AvatarGroup поддерживают атрибуты aria-label и role. Инициализация доступных свойств позволяет использовать их с экранными читалками и улучшает UX для пользователей с ограничениями по зрению:

<Avatar name="Мария" aria-label="Профиль Марии" />
<AvatarGroup size="md" role="group" aria-label="Участники команды">
  <Avatar name="Анна" />
  <Avatar name="Игорь" />
</AvatarGroup>

Эти компоненты позволяют создавать профессиональные интерфейсы с минимальной разметкой и полной интеграцией с системой темы Chakra UI.

Оглавление