Chip для тегов и меток

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

Основные свойства Chip

  • label — текст, отображаемый внутри Chip. Обычно это ключевая информация, например, имя тега или категория.
  • onDelete — функция обратного вызова для удаления Chip. При наличии этого свойства компонент отображает иконку удаления.
  • color — определяет цветовую схему Chip. Стандартные значения: default, primary, secondary, error, info, success, warning.
  • variant — визуальный стиль компонента: filled (по умолчанию) или outlined.
  • size — размер компонента: small, medium (по умолчанию), что влияет на высоту и внутренние отступы.
  • avatar — позволяет вставить аватар или иконку слева от текста, добавляя контекст или визуальный акцент.
  • icon — отображает иконку перед текстом без использования аватара.

Пример базового использования:

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

<Chip label="React" />
<Chip label="JavaScript" color="primary" />
<Chip label="Ошибка" color="error" variant="outlined" />

Работа с действиями

Chip может содержать интерактивные элементы, такие как кнопка удаления или кликабельная область. Для обработки кликов используется свойство onClick:

<Chip
  label="Удаляемый тег"
  onDel ete={() => console.log('Chip удалён')}
  onCl ick={() => console.log('Chip нажат')}
/>

Свойство onDelete автоматически добавляет крестик справа от Chip, что улучшает UX для динамически удаляемых тегов.

Вставка аватаров и иконок

Аватары и иконки позволяют визуально идентифицировать теги или категории. Они принимают компоненты MUI Avatar или SvgIcon:

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

<Chip
  avatar={<Avatar>M</Avatar>}
  label="Мария"
/>

<Chip
  icon={<FaceIcon />}
  label="Пользователь"
/>

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

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

MUI предоставляет возможность гибкой кастомизации через sx и систему тем. Например, изменение цвета текста и фона:

<Chip
  label="Кастомный"
  sx={{
    bgcolor: 'secondary.main',
    color: 'white',
    fontWeight: 'bold'
  }}
/>

Для масштабного проекта рекомендуется использовать тему MUI для единообразного оформления всех компонентов Chip:

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

const theme = createTheme({
  components: {
    MuiChip: {
      styleOverrides: {
        root: {
          borderRadius: 8,
          fontSize: '0.875rem'
        }
      }
    }
  }
});

<ThemeProvider theme={theme}>
  <Chip label="Тема Chip" color="primary" />
</ThemeProvider>

Использование в динамических списках

Часто Chip используется для отображения списка тегов или категорий. Для этого применяются методы массивов и генерация компонентов на основе данных:

const tags = ['React', 'JavaScript', 'MUI'];

{tags.map((tag, index) => (
  <Chip
    key={index}
    label={tag}
    onDel ete={() => handleDelete(tag)}
  />
))}

Функция handleDelete обычно обновляет состояние массива тегов, обеспечивая динамическое удаление:

const handleDelete = (tagToDelete) => {
  setTags(tags.filter(tag => tag !== tagToDelete));
};

Адаптация под мобильные интерфейсы

Для мобильных устройств важно контролировать размер и плотность отображения Chip. Использование свойства size="small" уменьшает высоту и внутренние отступы, что делает компонент более компактным:

<Chip label="Компактный тег" size="small" />

Также рекомендуется использовать горизонтальный скролл для длинных списков тегов:

<Box sx={{ display: 'flex', overflowX: 'auto', gap: 1 }}>
  {tags.map(tag => <Chip key={tag} label={tag} />)}
</Box>

Интеграция с автозаполнением и формами

Chip часто применяется вместе с компонентом Autocomplete для ввода и выбора нескольких значений:

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

<Autocomplete
  multiple
  options={tags}
  freeSolo
  renderTags={(value, getTagProps) =>
    value.map((option, index) => (
      <Chip
        variant="outlined"
        label={option}
        {...getTagProps({ index })}
      />
    ))
  }
  renderInput={(params) => <TextField {...params} label="Теги" />}
/>

В таком сценарии Chip автоматически управляет визуализацией выбранных элементов и их удалением, обеспечивая интуитивное взаимодействие с пользователем.

Заключение по функциональности

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

Оглавление