UserLabel
Maintainer:
DakEnviy
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 | |
| style | HTML-атрибут style. | React.CSSProperties | |
| qa | HTML-атрибут data-qa, используется для тестирования. | string | |
| size | Размер аватара. | 'xs' 's' 'm' 'l' 'xl' | 's' |
API CSS
| Имя | Описание |
|---|---|
--g-user-label-font-size | Размер шрифта текста. |
--g-user-label-line-height | Высота строки текста. |