AvatarDetail
Типовой пользовательский блок из продуктового UI Kit: аватар с необязательным статус индикатором, имя, контактные данные для копирования и вторичное описание.
Демо
И
Frontend-разработчик
Prop
Type
Value
contactDatatext
descriptiontext
nametext
Code
<AvatarDetail name="Иванов Иван" contactData="ivanov@example.com" description="Frontend-разработчик" />Когда использовать
- В профильных карточках, где нужно компактно показать аватар, имя и email/логин для копирования.
- В списках участников, владельцев ресурсов или ответственных, где важна быстрая идентификация пользователя.
Анатомия
Слоты
name— обязательное имя пользователя; отображается рядом с аватаром, обрезается при переполнении.contactData— опциональные контактные данные (email, логин); при клике копируются в буфер.description— опциональное описание под основной строкой (роль, должность).avatar— пропсы аватара (appearance,status,srcи др.) безname(берётся из корневого пропа).
Установка
pnpm add @cloud-ru/ds-uikit-product-avatar-detailimport { AvatarDetail, AvatarDetailProps } from '@cloud-ru/ds-uikit-product-avatar-detail'Примеры использования
Базовый
И
tsx
import { AvatarDetail } from '@cloud-ru/ds-uikit-product-avatar-detail';
export function Basic() {
return <AvatarDetail name='Иванов Иван' />;
}С контактными данными
П
tsx
import { AvatarDetail } from '@cloud-ru/ds-uikit-product-avatar-detail';
export function WithContactData() {
return <AvatarDetail name='Петрова Мария' contactData='petrova@example.com' />;
}С описанием
С
Тимлид платформенной команды
tsx
import { AvatarDetail } from '@cloud-ru/ds-uikit-product-avatar-detail';
export function WithDescription() {
return <AvatarDetail name='Сидоров Алексей' description='Тимлид платформенной команды' />;
}Кастомный аватар
К
tsx
import { AvatarDetail } from '@cloud-ru/ds-uikit-product-avatar-detail';
export function WithCustomAvatar() {
return (
<AvatarDetail
name='Козлова Анна'
contactData='kozlova@example.com'
avatar={{ appearance: 'violet', status: 'green' }}
/>
);
}Полный набор пропсов
Н
DevOps-инженер, Cloud Platform
tsx
import { AvatarDetail } from '@cloud-ru/ds-uikit-product-avatar-detail';
export function Full() {
return (
<AvatarDetail
name='Новиков Дмитрий'
contactData='novikov@example.com'
description='DevOps-инженер, Cloud Platform'
avatar={{ appearance: 'green', status: 'green' }}
/>
);
}Props
Types
Props
AvatarDetailProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
avatar | Omit<AvatarProps, "data-test-id" | "name"> | — | no | Аватар пропсы |
className | string | — | no | CSS-класс |
contactData | string | — | no | Контактные данные для отображения и копирования |
data-test-id | string | — | no | |
description | string | — | no | Дополнительное описание под основной строкой |
name | string | — | yes | Имя пользователя |