UIKit
7.11.0
• UserКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
size
name
description
import {User} from '@gravity-ui/uikit';
User
(пользователь) — это общий компонент для отображения аватара пользователя с информационным блоком. Он рендерит аватар через компонент Avatar, но также может принимать пользовательский узел React в качестве аватара.
§Имя и описание
Для отображения информационного блока компонент User
использует свойства name
и description
.
CD
Charles Darwincharles@mail.ai
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="l" />
§Размер
Размер User
можно настроить с помощью свойства size
. Размер по умолчанию — m
. Возможные значения: xs
, s
, m
, l
и xl
.
Это свойство также применимо к внутреннему компоненту Avatar
.
CD
Charles Darwin
CD
Charles Darwincharles@mail.ai
CD
Charles Darwincharles@mail.ai
CD
Charles Darwincharles@mail.ai
CD
Charles Darwincharles@mail.ai
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="xs" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="s" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="m" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="l" />
<User avatar={{text: 'Charles Darwin', theme: 'brand'}} name="Charles Darwin" description="charles@mail.ai" size="xl" />
§Свойства
Имя | Описание | Тип | Значение по умолчанию |
---|---|---|---|
avatar | Аватар пользователя. | Свойство аватара React.ReactElement | |
name | Имя пользователя. | React.ReactNode | |
description | Описание пользователя. | React.ReactNode | |
size | Размер секции пользователя. | 'xs' 's' 'm' 'l' 'xl' | m |
aria-label | Атрибут aria-labelledby для секции пользователя. | string | |
aria-labelledby | Атрибут aria-labelledby для секции пользователя. | string | |
className | Пользовательский CSS-класс корневого элемента. | string | |
style | HTML-атрибут style . | React.CSSProperties | |
qa | HTML-атрибут data-qa , используется для тестирования. | string |