Группа аватаров
Группа аватаров показывает несколько аватаров внахлёст и кнопку «+N» со списком остальных.
<tk-avatar-group label="4 collaborators"> <tk-avatar shape="circle" name="Mira Petrova"></tk-avatar> <tk-avatar shape="circle" name="Ola Nordmann"></tk-avatar> <tk-avatar shape="circle" name="Sam Lee"></tk-avatar> <tk-avatar name="Acme Corp"></tk-avatar> </tk-avatar-group>
Анатомия
| Часть | Что это |
|---|---|
tk-avatar-group |
ряд; группа с именем, если задан label |
| слот по умолчанию | аватары tk-avatar; первый лежит сверху |
| кольцо | кольцо 2px цвета страницы вокруг каждого аватара |
| кнопка «+N» | появляется, когда аватаров больше max; открывает |
слот overflow |
своё содержимое для поповера вместо списка имён, по желанию |
Переполнение
<tk-avatar-group max="5" label="8 collaborators"> <tk-avatar shape="circle" name="Mira Petrova" color="blue"></tk-avatar> <tk-avatar shape="circle" name="Ola Nordmann" color="pink"></tk-avatar> <tk-avatar shape="circle" name="Sam Lee" color="green"></tk-avatar> <tk-avatar shape="circle" name="Jo Kim" color="indigo"></tk-avatar> <tk-avatar shape="circle" name="Al Roy" color="teal"></tk-avatar> <tk-avatar shape="circle" name="Bea Fox" color="orange"></tk-avatar> <tk-avatar shape="circle" name="Cy Ng" color="purple"></tk-avatar> </tk-avatar-group>
maxсчитает все плитки, включая «+N». Если аватаров большеmax, группа показываетmax − 1аватар и плитку «+N», поэтому «+N» всегда прячет хотя бы двоих.- N — число скрытых аватаров. Чтобы показать большее число, например «200 участников», напишите его текстом рядом с группой.
- Кнопка «+N» открывает поповер со скрытыми аватарами и их именами. Строки — не
команды. Если строки должны куда-то вести, положите своё содержимое в слот
overflow.
Размеры
<tk-avatar-group size="24" label="3 reviewers"> <tk-avatar shape="circle" name="Mira Petrova"></tk-avatar> <tk-avatar shape="circle" name="Ola Nordmann"></tk-avatar> <tk-avatar shape="circle" name="Sam Lee"></tk-avatar> </tk-avatar-group>
size принимает размеры size у аватара внутри группы не
действует. Нахлёст — примерно треть размера.
Формы
Каждый аватар сохраняет свою форму, поэтому люди (круги) и боты или организации (квадраты)
могут стоять в одном ряду. У группы нет shape. «+N» всегда скруглённый квадрат. См.
Бейджи на аватарах внутри группы скрыты.
Когда использовать
- Группа — чтобы быстро показать, кто здесь, когда места мало: полоса «Доступ есть у», панель инструментов, карточка.
- Полный список участников — это список: по аватару в строке и число в заголовке.
- Для одного человека или организации берите
Avatar . - «+N» значит «ещё люди». Для действия «добавить человека» поставьте после группы
Icon button с «+».
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
| Группа как быстрый взгляд на то, кто здесь | Группа как полный список участников |
label, когда группа стоит одна |
Одинокая группа, которую скринридер не озвучит |
| Круги и квадраты вместе, если каждая форма правдива | Делать бота кругом, чтобы ряд был ровнее |
| Большое общее число текстом рядом с группой | Ждать, что «+N» покажет больше, чем скрыто |
Кликабельные строки в слоте overflow |
Оборачивать аватары в ссылки внутри группы: она принимает только tk-avatar |
Связанные
Avatar : аватар, из которых складывается группа.Popover : поверхность, которую открывает «+N».Badge : статус на отдельном аватаре.
API
Атрибуты
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
size |
20 | 24 | 32 | 40 | 48 | 64 |
32 |
размер всех аватаров и «+N» |
max |
number | 5 |
сколько плиток видно, включая «+N» |
label |
string | имя группы для скринридеров |
Слоты
| Слот | Содержимое |
|---|---|
| по умолчанию | аватары tk-avatar, первый сверху |
overflow |
ваши строки для поповера «+N» вместо списка имён |
События
Нет.
CSS
| Свойство | По умолчанию | Что делает |
|---|---|---|
--tk-avatar-group-overlap |
по размеру | насколько аватары заходят друг на друга |
--tk-avatar-group-ring-color |
surface/default |
цвет кольца; задайте, если фон не surface/default |
Токены
| Элемент | Токены |
|---|---|
| кольцо | surface/default |
| плитка «+N» | surface/sunken + text/secondary, font-weight-medium |
| угол «+N» | radius-4, radius-8, radius-12 по размеру |
| рамка фокуса «+N» | border/accent/focus |
| аватары | токены |
| поповер | токены |
Доступность
Встроено:
- Аватары скрыты от скринридеров. С
labelгруппа — группа с именем. - «+N» — кнопка в порядке Tab с именем «Show N more» и рамкой фокуса. Её поповер перечисляет скрытые имена.
На вашей стороне:
- Задайте
label, когда группа стоит одна: «5 участников». - Не задавайте
labelрядом с видимым текстом вроде «Доступ есть у», иначе он прозвучит дважды. - Не задавайте
labelаватарам внутри группы. - Имя кнопки «+N» английское, изменить его нельзя.
| Клавиша | Действие |
|---|---|
Tab |
переводит фокус на «+N» |
Enter / Space |
открывает поповер |
Esc |
закрывает его |