EntityLabel
EntityLabel — подпись сущности: аватар слева, имя и вторичная строка справа. Один компонент и для человека, и для организации — различает их только скругление аватара.
Аватар не встроен: первым потомком кладётся готовый Avatar.Root (со статусом, кольцом, иконкой — чем угодно) или AvatarGroup. Дальше — EntityLabel.Name и, если нужно, EntityLabel.Secondary; обёртки для текста нет, колонку держит сам EntityLabel.Root.
Собственного size у компонента нет: кегль текста и отступ ведёт вложенный аватар. В отличие от Cell это не строка списка — ни подложки, ни фиксированной высоты, ни ширины на весь контейнер.
Анатомия
Примеры
Вторичная строка
EntityLabel.Secondary — вторая строка под именем приглушённым цветом: e-mail, роль, что угодно уточняющее. Аватар при этом центрируется по обеим строкам.
Организация
Организация отличается от человека только скруглением аватара — по умолчанию Avatar.Root рисует скруглённый квадрат, для человека передают radius="circle". В Avatar.Fallback передавайте полное название: инициалы и цвет он посчитает сам.
Размер
Размер задаётся на вложенном Avatar.Root — кегль имени, вторичной строки и отступ между аватаром и текстом едут за ним автоматически.
Длинные значения
Имя и вторичная строка усекаются многоточием по ширине контейнера — раскладку они не ломают и на вторую строку не переносятся.
Группа участников
Вместо одного аватара в слот кладётся AvatarGroup, а имена перечисляет хелпер getNameList — хвост сверх лимита сворачивается в «и ещё N». Лимит стоит держать общим: maxCount группы и второй аргумент хелпера, иначе счётчик и подпись покажут разные числа.
API
| Prop | Type | Default |
|---|---|---|
children*Аватар сущности ( | ReactNode | - |
EntityLabel.Name
Имя человека или название организации — базовым цветом текста, в одну строку с усечением.
| Prop | Type | Default |
|---|---|---|
children*Имя человека или название организации — усекается многоточием | ReactNode | - |
EntityLabel.Secondary
Вторичная строка под именем — приглушённым цветом, тоже с усечением.
| Prop | Type | Default |
|---|---|---|
children*Вторичная строка под именем: e-mail, роль, описание — приглушённым цветом, усекается многоточием | ReactNode | - |