Группировка аватаров

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

Компонент AvatarGroup

AvatarGroup — контейнер для нескольких аватаров, позволяющий компактно отображать их в виде стека или горизонтальной линии с перекрытием. Основные свойства включают:

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

Пример базовой структуры:

import * as Avatar from '@radix-ui/react-avatar';

<Avatar.Group max={3} spacing={-10}>
  <Avatar.Root>
    <Avatar.Image src="user1.jpg" alt="User 1" />
    <Avatar.Fallback>U1</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="user2.jpg" alt="User 2" />
    <Avatar.Fallback>U2</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="user3.jpg" alt="User 3" />
    <Avatar.Fallback>U3</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="user4.jpg" alt="User 4" />
    <Avatar.Fallback>U4</Avatar.Fallback>
  </Avatar.Root>
</Avatar.Group>

В этом примере отображаются первые три аватара, а четвёртый будет скрыт за индикатором, показывающим «+1».

Настройка внешнего вида

Размеры аватаров

Каждый аватар в группе может иметь собственный размер, но рекомендуется использовать одинаковые размеры для единообразного визуального стека. Размер задаётся через CSS или проп style:

<Avatar.Root style={{ width: 40, height: 40 }}>
  <Avatar.Image src="user.jpg" alt="User" />
  <Avatar.Fallback>U</Avatar.Fallback>
</Avatar.Root>

Цвет фона и границ

Для улучшения видимости при перекрытии аватаров можно задать контрастные границы и фон:

.avatar {
  border: 2px solid white;
  border-radius: 50%;
  background-color: #ccc;
}
<Avatar.Root className="avatar">
  <Avatar.Image src="user.jpg" alt="User" />
  <Avatar.Fallback>U</Avatar.Fallback>
</Avatar.Root>

Индикатор количества скрытых аватаров

Если количество аватаров превышает max, Radix UI автоматически отображает +N. Этот элемент можно стилизовать отдельно:

<Avatar.Group max={3} spacing={-10}>
  {/* Авторы */}
  <Avatar.Overflow>
    +{remainingCount}
  </Avatar.Overflow>
</Avatar.Group>

С помощью CSS можно задавать цвет, размер и фон для индикатора:

.avatar-overflow {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #999;
  color: white;
  font-weight: bold;
  border: 2px solid white;
}

Доступность (Accessibility)

Radix UI гарантирует базовую доступность через семантические элементы и ARIA-атрибуты:

  • Каждый аватар имеет alt текст для изображений.
  • При наличии Fallback инициалы могут служить текстовой альтернативой.
  • Стек аватаров не препятствует навигации клавиатурой.

Рекомендуется использовать aria-label для группы аватаров, если она представляет команду или участников:

<Avatar.Group aria-label="Команда проекта">
  ...
</Avatar.Group>

Анимации и взаимодействия

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

.avatar {
  transition: transform 0.2s ease;
}

.avatar:hover {
  transform: scale(1.1);
  z-index: 1;
}

Это позволяет при наведении выделять аватар, не нарушая компоновку группы.

Комбинация с другими компонентами

Avatar Group легко интегрируется с другими Radix UI компонентами:

  • Tooltip — отображение имени пользователя при наведении.
  • Popover — раскрывающаяся карточка профиля при клике.
  • Badge — индикаторы статуса рядом с аватаром.

Пример с Tooltip:

import * as Tooltip from '@radix-ui/react-tooltip';

<Avatar.Group spacing={-10}>
  <Tooltip.Root>
    <Tooltip.Trigger asChild>
      <Avatar.Root>
        <Avatar.Image src="user.jpg" alt="User" />
        <Avatar.Fallback>U</Avatar.Fallback>
      </Avatar.Root>
    </Tooltip.Trigger>
    <Tooltip.Content>Пользователь 1</Tooltip.Content>
  </Tooltip.Root>
</Avatar.Group>

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

  1. Единообразие размеров — важнее, чем индивидуальность каждого аватара.
  2. Контрастные границы — помогают различать перекрывающиеся аватары.
  3. Использование max — улучшает визуальное восприятие больших групп.
  4. Анимации при hover — делают интерфейс более отзывчивым без ущерба доступности.
  5. Fallback инициалы — обязательны для пользователей без изображений.

Эта структура позволяет создавать гибкие, доступные и визуально привлекательные стеки аватаров, которые легко масштабируются и интегрируются с другими элементами интерфейса в рамках Radix UI.

Оглавление