AvatarGroup
Стек аватарів із переповненням «+N», де приховані учасники лишаються названими.
Учасники угоди, відповідальні за задачу, підписники на розсилку — скрізь, де людей кілька, а місця на рядок мало.
Уся команда вміщається
Переповнення: решта — у підписі «+N»
Щільніше накладання, більший розмір
Приховані не означає зниклі
Обрізати список до max — це рішення про ПЛОЩУ, а не про зміст. Для того,
хто дивиться очима, «+3» достатньо: наведе або клікне й побачить решту.
Для скрінрідера обрізаний аватар зникає безслідно.
Тому плитка «+N» несе aria-label з переліком решти імен, а не самим
числом. Три приховані учасники читаються як «Ще 3: Тарас Шевчук, Марія
Лисенко, Дмитро Гнатюк».
Альтернативу — один role="img" на всю групу з переліком усіх імен —
відкинуто: вона дає рядок на двісті символів і вбиває можливість зробити
кожен аватар окремим посиланням.
Порядок накладання
Візуально стек має йти зліва направо з першим аватаром ЗВЕРХУ, але в DOM
пізніший сусід малюється поверх раннього. Тому z-index спадає разом з
індексом. Це локальний контекст накладання, зі спільним
стеком оверлеїв він не пов'язаний і в нього не
втручається.
Кільце навколо аватара — box-shadow кольором --bg-card, а не біла
рамка: на темній темі біла обвідка світилася б.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
items* | AvatarGroupItem[] | — | Учасники. Порядок зберігається: перший малюється поверх решти. |
label* | string | — | Доступна назва ГРУПИ: «Учасники проєкту». Обов'язкова — інакше скрінрідер зачитає підряд вісім безіменних зображень. |
max | number | 5 | Скільки аватарів показати до плитки «+N». Решта лишається лише в підписі лічильника — саме тому він перелічує їх поіменно. |
size | number | 32 | Розмір кожного аватара в пікселях. Проксується в `UiAvatar`. |
overlap | normalnonetight | "normal" | Наскільки аватари налазять один на одного. |
Слоти
| Назва | Опис |
|---|---|
avatar | Власний рендер одного аватара — наприклад, обгортка в посилання. |
overflow | Лічильник переповнення замість типового «+N». Отримує решту учасників, щоб їх можна було показати в попапі. |
Коли використовувати
- Учасники запису в CRM: угода, задача, тікет.
- Колонка «Відповідальні» в таблиці, де на рядок є два сантиметри.
- Підсумок «хто вже переглянув» під документом.
Коли НЕ використовувати
- Коли імена важливіші за обличчя — тоді це список із іменами, а не стек.
- Для одного учасника:
UiAvatarнапряму, без обгортки. - Як засіб вибору. Стек показує, а не редагує; для вибору людей є
UiMultiSelect.
Доступність
Група — <ul> з aria-label, кожен аватар у власному <li>. UiAvatar
всередині лишається role="img" з власним іменем, тож кожен учасник
читається окремо.
Наскрізна навігація не додається навмисно: стек аватарів не є набором
контролів. Якщо аватари мають бути посиланнями, обгорніть їх у слоті
avatar — і тоді фокус з'явиться природно.