EntityLabel

EntityLabel — подпись сущности: аватар слева, имя и вторичная строка справа. Один компонент и для человека, и для организации — различает их только скругление аватара.

Аватар не встроен: первым потомком кладётся готовый Avatar.Root (со статусом, кольцом, иконкой — чем угодно) или AvatarGroup. Дальше — EntityLabel.Name и, если нужно, EntityLabel.Secondary; обёртки для текста нет, колонку держит сам EntityLabel.Root.

Собственного size у компонента нет: кегль текста и отступ ведёт вложенный аватар. В отличие от Cell это не строка списка — ни подложки, ни фиксированной высоты, ни ширины на весь контейнер.

АП
Анна Петрова

Анатомия

EntityLabel.Root
Avatar.Root | AvatarGroup
EntityLabel.Name
EntityLabel.Secondary

Примеры

Вторичная строка

EntityLabel.Secondary — вторая строка под именем приглушённым цветом: e-mail, роль, что угодно уточняющее. Аватар при этом центрируется по обеим строкам.

АП
Анна Петроваanna@tulls.md
ИС
Иван СидоровВладелец

Организация

Организация отличается от человека только скруглением аватара — по умолчанию Avatar.Root рисует скруглённый квадрат, для человека передают radius="circle". В Avatar.Fallback передавайте полное название: инициалы и цвет он посчитает сам.

ТМ
Тулс Медиа12 участников
Организация без названия

Размер

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

АП
Анна Петроваanna@tulls.md
АП
Анна Петроваanna@tulls.md
АП
Анна Петроваanna@tulls.md
АП
Анна Петроваanna@tulls.md

Длинные значения

Имя и вторичная строка усекаются многоточием по ширине контейнера — раскладку они не ломают и на вторую строку не переносятся.

КП
Константин Полупальцевkonstantin.polupaltsev@tulls.md

Группа участников

Вместо одного аватара в слот кладётся AvatarGroup, а имена перечисляет хелпер getNameList — хвост сверх лимита сворачивается в «и ещё N». Лимит стоит держать общим: maxCount группы и второй аргумент хелпера, иначе счётчик и подпись покажут разные числа.

АП
ИС
ПС
+2
Анна Петрова, Иван Сидоров, Пётр Смирнов и ещё 2

API

PropTypeDefault
children*

Аватар сущности (Avatar.Root или AvatarGroup) первым потомком, дальше EntityLabel.Name и, при необходимости, EntityLabel.Secondary

ReactNode-

EntityLabel.Name

Имя человека или название организации — базовым цветом текста, в одну строку с усечением.

PropTypeDefault
children*

Имя человека или название организации — усекается многоточием

ReactNode-

EntityLabel.Secondary

Вторичная строка под именем — приглушённым цветом, тоже с усечением.

PropTypeDefault
children*

Вторичная строка под именем: e-mail, роль, описание — приглушённым цветом, усекается многоточием

ReactNode-