AvatarGroup

AvatarGroup — стопка аватаров с наложением: соседние аватары наезжают друг на друга, между ними зазор цветом фона. Кто лежит поверх — задаёт stack.

size группы задаёт размер всем аватарам сразу, наложение подстраивается само. Остальной внешний вид группа не трогает: скругление, статус, кольцо остаются на Avatar.Root.

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

TU
AP
IS

Анатомия

AvatarGroup
Avatar.Root
Avatar.Root
«+N» (при maxCount, рендерит группа)

Примеры

Размер

size на группе — один размер для всех вложенных Avatar.Root, задавать его каждому аватару не нужно.

TU
AP
IS
TU
AP
IS
TU
AP
IS
TU
AP
IS

Размер отдельного аватара

Свой size на Avatar.Root важнее размера группы — так можно выделить одного участника, например владельца проекта.

TU
AP
IS

Счётчик остальных

maxCount ограничивает число показанных аватаров — остальные сворачиваются в счётчик «+N» в конце группы. Скругление счётчик берёт у первого аватара, размер — у группы. Если сверх лимита остался один аватар, он показывается как есть: «+1» занял бы столько же места. Лимит от числа аватаров и больше ничего не сворачивает, maxCount={0} оставит один счётчик.

TU
AP
IS
+2
TU
AP
IS
PS

Порядок наложения

stack решает, кто лежит поверх соседей: "last" (по умолчанию) — последний аватар ряда, "first" — первый. Порядок аватаров в ряду при этом не меняется. Счётчик «+N» всегда замыкает ряд и подчиняется тому же правилу: при "last" он лежит поверх соседа, при "first" — под ним.

TU
AP
IS
+2
+2
IS
AP
TU

API

PropTypeDefault
children*

Аватары группы — Avatar.Root; каждый следующий наезжает на предыдущий

ReactNode-
size

Размер аватаров группы. Своим size на Avatar.Root его можно перебить точечно — например, сделать первый аватар крупнее

Sizesm
maxCount

Сколько аватаров показать. Не поместившиеся сворачиваются в счётчик «+N» в конце группы; единственный лишний аватар показывается как есть. Значение от числа аватаров и больше ничего не меняет, 0 оставит один счётчик. Без пропа показываются все

number-
stack

Какой аватар лежит поверх соседей: последний в ряду или первый. Счётчик «+N» замыкает ряд и подчиняется тому же правилу

"first" | "last""last"