Интерактивные карточки

Карточка (Card) в библиотеке MUI — это универсальный контейнер для отображения информации с поддержкой заголовков, текста, медиа и действий. Она построена на компоненте Paper и наследует возможности оформления материала. Основные компоненты для карточек:

  • Card — контейнер карточки.
  • CardHeader — заголовок с подзаголовком и аватаром.
  • CardMedia — блок для изображений или видео.
  • CardContent — основной контент карточки (текст, элементы управления).
  • CardActions — область для кнопок и действий.

Простейший пример карточки с заголовком и текстом:

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';


  
    
      Заголовок карточки
    
    
      Это пример текста внутри карточки. Здесь можно размещать описание или другую информацию.

sx позволяет быстро задавать стили напрямую через объект. maxWidth ограничивает ширину карточки, а Typography отвечает за типографику текста.

Использование изображений и медиа

Для добавления изображений используется CardMedia. Он автоматически подстраивает изображение под размеры карточки и поддерживает разные форматы:

import CardMedia from '@mui/material/CardMedia';
  • component может быть img, video или любым другим HTML-элементом.
  • height задает высоту блока.
  • image — путь к изображению.
  • alt необходим для доступности.

Добавление интерактивных элементов

Для кнопок и действий используется CardActions:

import CardActions from '@mui/material/CardActions';
import Button from '@mui/material/Button';

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

Реакция на наведение и клики

Интерактивность карточек повышается при использовании hover-эффектов и обработки кликов:

 console.log('Карточка нажата')}
>
  
    Карточка с эффектом наведения
  • transition делает анимацию плавной.
  • &:hover задает состояние при наведении.
  • cursor: 'pointer' визуально указывает на интерактивность.
  • onClick подключает обработку события клика.

Сложные карточки с аватаром и заголовком

CardHeader позволяет добавлять аватар, заголовок и подзаголовок:

import CardHeader from '@mui/material/CardHeader';
import Avatar from '@mui/material/Avatar';
import IconButton from '@mui/material/IconButton';
import MoreVertIcon from '@mui/icons-material/MoreVert';


  
        R
      
    }
    action={
      
        
      
    }
    title="Название карточки"
    subheader="Подзаголовок"
  />
  
    
      Подробное описание карточки с интерактивными элементами.
  • avatar отображает небольшое изображение или инициал.
  • action — место для иконок управления (меню, настройки).
  • title и subheader обеспечивают структурированное отображение текста.

Интеграция с сеткой и адаптивность

Для размещения нескольких карточек удобно использовать Grid из MUI:

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


  
    …
  
  
    …
  • xs, sm, md задают адаптивное поведение для разных экранов.
  • spacing регулирует расстояние между карточками.

Встроенные интерактивные компоненты

Карточки могут содержать элементы управления, например Checkbox, Switch, Rating:

import Checkbox from '@mui/material/Checkbox';
import FavoriteIcon from '@mui/icons-material/Favorite';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';


  }
    checkedIcon={}
    defaultChecked
  />
  • icon и checkedIcon позволяют кастомизировать отображение состояния.
  • Подключение событий onChange делает карточку интерактивной.

Динамическое отображение карточек

Часто карточки создаются динамически из массива данных:

const data = [
  { id: 1, title: 'Первая карточка', description: 'Описание 1' },
  { id: 2, title: 'Вторая карточка', description: 'Описание 2' },
];


  {data.map(item => (
    
      
        
          {item.title}
          
            {item.description}
          
        
      
    
  ))}

Использование map позволяет легко масштабировать интерфейс и управлять контентом без повторения кода.

Оглавление