Deletable и clickable чипы

В библиотеке MUI (Material-UI) чипы (Chip) используются для отображения компактных элементов интерфейса, представляющих данные, действия или теги. Они могут быть интерактивными, позволяя пользователю выполнять действия, например, удалять элементы или переходить по ссылкам. Две ключевые интерактивные возможности чипов — удаление (deletable) и клики (clickable) — реализуются через свойства компонента Chip.

Свойство deletable

На самом деле в MUI нет прямого свойства deletable, но возможность удаления реализуется через комбинацию иконки удаления (deleteIcon) и обработчика события (onDelete).

Пример базового удаляемого чипа:

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

function DeletableChip() {
  const handleDelete = () => {
    console.log('Чип удалён');
  };

  return (
    
  );
}

export default DeletableChip;

Пояснения:

  • onDelete — функция, которая вызывается при нажатии на иконку удаления.
  • По умолчанию MUI добавляет стандартный значок “крестик”. Его можно заменить через свойство deleteIcon:
}
/>

Стилизация удаления:

MUI позволяет кастомизировать внешний вид иконки и чипа через sx или styled:

Свойство clickable

Чипы могут реагировать на клики, превращаясь в мини-кнопки. Для этого используется свойство clickable и обработчик onClick.

Пример кликабельного чипа:

 console.log('Чип кликнут')}
/>

Особенности кликабельных чипов:

  • Визуально они получают эффект наведения и изменение курсора (pointer).
  • Можно комбинировать с удалением, если чип одновременно удаляемый и кликабельный:
 console.log('Чип кликнут')}
  onDel ete={() => console.log('Чип удалён')}
/>

Комбинация clickable и deletable

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

  1. clickable делает весь чип интерактивным.
  2. onDelete добавляет иконку удаления, которая не вызывает onClick.

Важно помнить, что события разделяются: клик по иконке удаления не вызывает onClick.

 console.log('Чип кликнут')}
  onDel ete={() => console.log('Удалён')}
  color="primary"
/>

Кастомизация и стили

Цвета и вариант:

  • color — default | primary | secondary | error | info | success | warning
  • variant — filled | outlined
 {}}
  color="success"
  variant="outlined"
/>

Стилизация через sx:

 {}}
  sx={{
    bgcolor: 'lightgreen',
    color: 'darkgreen',
    '&:hover': { bgcolor: 'green', color: 'white' },
    '& .MuiChip-deleteIcon': { color: 'darkred' }
  }}
/>

Использование с аватаром:

Чипы можно сочетать с аватаром, чтобы обозначить владельца или тип тега:

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

}
  label="Чип с аватаром"
  clickable
  onDel ete={() => console.log('Удалён')}
  color="secondary"
/>

Список динамически удаляемых чипов

Частый сценарий — список тегов, которые можно удалять:

import React, { useState } from 'react';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';

function ChipList() {
  const [tags, setTags] = useState(['React', 'MUI', 'JavaScript']);

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

  return (
    
      {tags.map(tag => (
         handleDelete(tag)}
        />
      ))}
    
  );
}

export default ChipList;

Особенности:

  • Каждый чип получает уникальный key.
  • handleDelete изменяет состояние родительского компонента, удаляя выбранный элемент.
  • Можно объединять с clickable, чтобы клики по чипу выполняли дополнительные действия.

Итого по функционалу

  • onDelete делает чип удаляемым; иконка удаления появляется автоматически.
  • clickable делает чип кликабельным и добавляет визуальный эффект наведения.
  • Свойства могут комбинироваться без конфликтов: клик по иконке удаления отдельно от клика по чипу.
  • Настройка внешнего вида через sx, color, variant, avatar, deleteIcon позволяет гибко подстраивать компонент под дизайн приложения.
Оглавление