AvatarGroup
AvatarGroup — стопка аватаров с наложением: соседние аватары наезжают друг на друга, между ними зазор цветом фона. Кто лежит поверх — задаёт stack.
size группы задаёт размер всем аватарам сразу, наложение подстраивается само. Остальной внешний вид группа не трогает: скругление, статус, кольцо остаются на Avatar.Root.
Чтобы рядом с группой перечислить имена, положите её в EntityLabel.
Использует: Avatar
Анатомия
Примеры
Размер
size на группе — один размер для всех вложенных Avatar.Root, задавать его каждому аватару не нужно.
Размер отдельного аватара
Свой size на Avatar.Root важнее размера группы — так можно выделить одного участника, например владельца проекта.
Счётчик остальных
maxCount ограничивает число показанных аватаров — остальные сворачиваются в счётчик «+N» в конце группы. Скругление счётчик берёт у первого аватара, размер — у группы. Если сверх лимита остался один аватар, он показывается как есть: «+1» занял бы столько же места. Лимит от числа аватаров и больше ничего не сворачивает, maxCount={0} оставит один счётчик.
Порядок наложения
stack решает, кто лежит поверх соседей: "last" (по умолчанию) — последний аватар ряда, "first" — первый. Порядок аватаров в ряду при этом не меняется. Счётчик «+N» всегда замыкает ряд и подчиняется тому же правилу: при "last" он лежит поверх соседа, при "first" — под ним.
API
| Prop | Type | Default |
|---|---|---|
children*Аватары группы — Avatar.Root; каждый следующий наезжает на предыдущий | ReactNode | - |
sizeРазмер аватаров группы. Своим | Size | sm |
maxCountСколько аватаров показать. Не поместившиеся сворачиваются
в счётчик «+N» в конце группы; единственный лишний аватар
показывается как есть. Значение от числа аватаров и больше
ничего не меняет, | number | - |
stackКакой аватар лежит поверх соседей: последний в ряду или первый. Счётчик «+N» замыкает ряд и подчиняется тому же правилу | "first" | "last" | "last" |