Avatar в чипах

Компонент Avatar в библиотеке MUI предназначен для отображения графического или текстового представления пользователя или объекта. В сочетании с компонентом Chip он позволяет создавать компактные интерактивные элементы с визуальной идентификацией. Это особенно полезно для списков пользователей, тегов, меток и интерфейсов, где важна визуальная персонализация элементов.

Основная структура Chip с Avatar

import * as React from 'react';
import Chip from '@mui/material/Chip';
import Avatar from '@mui/material/Avatar';

function UserChip() {
  return (
    <Chip
      avatar={<Avatar alt="John Doe" src="/images/john_doe.jpg" />}
      label="John Doe"
      onCl ick={() => console.log('Chip clicked')}
    />
  );
}
  • avatar — принимает компонент Avatar, который можно кастомизировать под изображение или инициалы пользователя.
  • label — текстовое содержимое чипа.
  • onClick — обработчик клика по чипу.

Использование инициалов вместо изображения

Если фотография пользователя отсутствует, часто используют инициалы:

<Chip
  avatar={<Avatar>JD</Avatar>}
  label="John Doe"
/>

Инициалы автоматически центрируются и наследуют цвета из темы, что делает интерфейс единообразным.

Настройка размеров и цветов

MUI позволяет изменять размеры аватаров и чипов, а также управлять цветами через пропсы и тему.

<Chip
  avatar={<Avatar sx={{ width: 32, height: 32 }}>JD</Avatar>}
  label="John Doe"
  color="primary"
  variant="outlined"
/>
  • sx — проп для кастомных стилей через систему MUI.
  • width и height определяют размеры аватара.
  • color — предустановленные цвета темы (primary, secondary, error, info, success, warning).
  • variant — визуальный стиль чипа (filled или outlined).

Добавление иконок и действий

Помимо аватара, чип может содержать иконку удаления или дополнительную иконку слева:

import FaceIcon from '@mui/icons-material/Face';
import CancelIcon from '@mui/icons-material/Cancel';

<Chip
  avatar={<Avatar>JD</Avatar>}
  label="John Doe"
  icon={<FaceIcon />}
  onDel ete={() => console.log('Delete action')}
/>
  • icon — дополнительная иконка перед текстом.
  • onDelete — позволяет добавить кнопку удаления с автоматическим отображением крестика справа.

Стилизация через тему

Компоненты MUI хорошо интегрируются с тематикой приложения. Например, можно изменить фон аватара всех чипов:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiAvatar: {
      styleOverrides: {
        root: {
          backgroundColor: '#4caf50',
          color: '#fff',
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <Chip avatar={<Avatar>JD</Avatar>} label="John Doe" />
</ThemeProvider>
  • styleOverrides позволяет глобально переопределять стили компонентов.
  • Применение темы обеспечивает единый визуальный язык приложения.

Адаптивность и взаимодействие

Чипы с аватарами хорошо масштабируются для мобильных и десктопных интерфейсов. Они автоматически подстраиваются под ширину контейнера и поддерживают интерактивность через события onClick и onDelete.

<Chip
  avatar={<Avatar src="/images/john_doe.jpg" />}
  label="John Doe"
  onCl ick={() => console.log('Clicked')}
  onDel ete={() => console.log('Removed')}
  variant="outlined"
/>
  • Использование outlined делает чип визуально менее громоздким, что удобно для адаптивного дизайна.
  • Встроенные hover-эффекты MUI обеспечивают визуальный отклик при взаимодействии.

Комбинирование с другими компонентами

Чипы с аватарами часто используют в списках пользователей, тегах категорий или контактах:

import Stack from '@mui/material/Stack';

<Stack direction="row" spacing={1}>
  <Chip avatar={<Avatar>AB</Avatar>} label="Alice" />
  <Chip avatar={<Avatar>CD</Avatar>} label="Charlie" />
  <Chip avatar={<Avatar>EF</Avatar>} label="Eve" />
</Stack>
  • Stack обеспечивает горизонтальное или вертикальное выравнивание чипов с отступами.
  • Простое масштабирование до множества элементов без потери читаемости и интерактивности.

Оптимизация производительности

При работе с большим количеством чипов с аватарами стоит учитывать ленивую загрузку изображений и использование ключей (key) для оптимизации рендеринга:

{users.map((user) => (
  <Chip
    key={user.id}
    avatar={<Avatar src={user.avatarUrl} />}
    label={user.name}
  />
))}
  • key предотвращает перерисовку всего списка при изменении одного элемента.
  • Использование src вместо встроенного Base64 уменьшает нагрузку на память.

Дополнительные возможности кастомизации

  • Badge на аватаре: можно сочетать с Badge для отображения статуса.
  • Стилизация текста: через sx или Typography можно изменять шрифты.
  • Анимации: подключение CSS-анимаций для появления и удаления чипов.

Использование аватаров в чипах MUI обеспечивает лаконичный и визуально понятный способ представления пользователей и объектов, поддерживает адаптивность интерфейса и интеграцию с темой приложения.

Оглавление