UIKit
7.11.0
• UserLabelКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
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 | Высота строки текста. |