AvatarStack

Паттерны

Превью ревьюеров

Когда использовать:

• карточке или строке нужно компактное превью вовлечённых людей

Заметки о композиции:

• держите группу небольшой
• добавьте рядом подпись или счётчик, если важен точный состав

Компромиссы:

• быстрое визуальное узнавание
• менее явно, чем полные имена

import { AvatarFallback, AvatarImage, AvatarStack, AvatarStackItem, Text } from '@vega-ui/react';

const portrait = (hue: number) => `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' fill='hsl(${hue} 60% 82%)'/><circle cx='32' cy='25' r='11' fill='hsl(${hue} 35% 42%)'/><path d='M12 64c1-13 9-21 20-21s19 8 20 21z' fill='hsl(${hue} 35% 42%)'/></svg>`)}`;

const reviewers = [
  { name: 'Maria Chen', initials: 'MC', photo: portrait(210) },
  { name: 'Omar Haddad', initials: 'OH', photo: portrait(28) },
  { name: 'Lena Fischer', initials: 'LF', photo: '' },
  { name: 'Kenji Watanabe', initials: 'KW', photo: portrait(150) },
  { name: 'Ana Souza', initials: 'AS', photo: '' },
  { name: 'Tom Becker', initials: 'TB', photo: '' },
];

Группа из фото и запасных вариантов

Когда использовать:

• у одних пользователей есть фото профиля, у других только инициалы

Заметки о композиции:

• держите у всех элементов одинаковые размер и вариант
• задавайте разумный alt для изображений

Компромиссы:

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

import { AvatarFallback, AvatarIcon, AvatarImage, AvatarStack, AvatarStackItem } from '@vega-ui/react';
import { User } from '@vega-ui/icons';

const portrait = (hue: number) => `data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect width='64' height='64' fill='hsl(${hue} 60% 82%)'/><circle cx='32' cy='25' r='11' fill='hsl(${hue} 35% 42%)'/><path d='M12 64c1-13 9-21 20-21s19 8 20 21z' fill='hsl(${hue} 35% 42%)'/></svg>`)}`;

export default function MixedSources() {
  return (
    <AvatarStack role='group' aria-label='Document editors'>
      <AvatarStackItem role='img' aria-label='Maria Chen'>
        <AvatarImage src={portrait(210)} alt='' />
        <AvatarFallback>MC</AvatarFallback>
      </AvatarStackItem>

Участники в шапке модального окна

Когда использовать:

• шапке оверлея нужна компактная подсказка об участниках

Заметки о композиции:

• предпочитайте размеры sm или md
• держите группу визуально второстепенной по отношению к основному заголовку

Компромиссы:

• компактно и аккуратно
• легко перегрузить, если показать слишком много аватаров

import type { CSSProperties } from 'react';
import {
  Avatar,
  AvatarFallback,
  AvatarStack,
  AvatarStackItem,
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogTrigger,
  Heading,

Сравнение

Быстрое правило выбора

Используйте AvatarStack, когда нескольких людей нужно компактно показать одним групповым отображением. Используйте отдельный Avatar, когда показан только один человек.

AvatarStack или Avatar

Используйте AvatarStack, когда:

• нескольких людей или сущностей нужно показать вместе

Используйте Avatar, когда:

• достаточно одного человека или сущности

AvatarStack или список имён

Используйте AvatarStack, когда:

• компактное визуальное узнавание важнее явного перечисления

Используйте текстовый список, когда:

• явные имена, роли или порядок важнее компактности

Выбирайте этот компонент, когда

• нескольких людей нужно показать на небольшой площади
• визуальная группировка важнее явного перечисления
• стопка служит компактным сигналом группы, а не полным списком участников

Не выбирайте этот компонент, когда

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

Решение проблем

Эффект перекрытия выглядит неправильно

Симптом

Аватары складываются неаккуратно или отступы неожиданно скачут.

Вероятная причина

У элементов разные размеры аватаров или они отрендерены вне AvatarStackItem.

Как проверить

• проверьте, что каждый дочерний элемент — это AvatarStackItem
• сравните размеры аватаров в группе

Исправление

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

Группу трудно понять

Симптом

Пользователи видят компактную группу аватаров, но не понимают, кого или что она представляет.

Вероятная причина

Не хватает окружающего контекста.

Как проверить

• прочитайте интерфейс без подписей и соседнего текста

Исправление

Добавьте рядом текст, счётчик или заголовок, объясняющий группу.

Отрендерено слишком много людей

Симптом

Стопка становится визуально шумной и нечитаемой.

Вероятная причина

Продукт рендерит каждого участника напрямую.

Как проверить

• посчитайте отрендеренные элементы на реальных данных

Исправление

Усекайте группу и используйте сводный паттерн вроде +N на уровне приложения.