UserLabel

Maintainer:
DakEnviy
GitHub
view
type
avatar
text

UserLabel

Компонент UserLabel служит для отображения пользователей и любой связанной с ними информации.

Тип

Используется для управления внешним видом аватара. Выберите "person" для персонализированной сущности или "email" для адреса электронной почты. Если аватар не нужен, выберите "empty".

<UserLabel type="person">Charles Darwin</UserLabel>
<UserLabel type="email">email@example.com</UserLabel>
<UserLabel type="empty">Alan Turing</UserLabel>

Аватар

UserLabel можно использовать с пользовательским аватаром, но только при type: 'person'. Можно передать изображение, свойство компонента Avatar или пользовательский узел React.

import {GraduationCap} from '@gravity-ui/icons';

<UserLabel type="person" avatar="<url>">Charles Darwin</UserLabel>
<UserLabel type="person" avatar={{icon: GraduationCap}}>Charles Darwin</UserLabel>

Интерактивность

UserLabel также поддерживает интерактивные функции, такие как кликабельность и возможность закрытия.

<UserLabel onClick={() => alert('onClick triggered')}>Charles Darwin</UserLabel>
<UserLabel onCloseClick={() => alert('onCloseClick triggered')}>Charles Darwin</UserLabel>

Свойства

ИмяОписаниеТипЗначение по умолчанию
typeВнешний вид аватара.'person' 'email' 'empty''person'
avatarАватар пользователя.Свойства аватара string и React.ReactElement
childrenТекст, который будет отображен.React.ReactNode
viewВнешний вид компонента UserLabel.'outlined' 'clear''outlined'
onClickОбработчик события click для компонента.Function
onCloseClickОбработчик события click для кнопки с иконкой крестика.Function
classNameПользовательский CSS-класс корневого элемента.string
styleHTML-атрибут style.React.CSSProperties
qaHTML-атрибут data-qa, используется для тестирования.string
sizeРазмер аватара.'xs' 's' 'm' 'l' 'xl''s'

API CSS

ИмяОписание
--g-user-label-font-sizeРазмер шрифта текста.
--g-user-label-line-heightВысота строки текста.