Сложные лайауты карточек

Библиотека MUI предоставляет гибкий и мощный инструмент для построения интерфейсов с использованием карточек (Card). Сложные лайауты карточек позволяют создавать интерактивные и визуально привлекательные элементы, которые могут содержать изображения, тексты, кнопки, списки и другие вложенные компоненты.

Структура карточки

Карточка в MUI состоит из нескольких основных компонентов:

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

Пример базовой структуры:

import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardMedia from '@mui/material/CardMedia';
import CardContent from '@mui/material/CardContent';
import CardActions from '@mui/material/CardActions';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';


  
  
  
    
      Основной текст карточки с описанием.

Использование сетки и Flexbox для сложных лайаутов

Для построения сложных макетов карточек MUI рекомендует использовать Grid или систему Box с Flexbox. Это позволяет создавать адаптивные и многоуровневые структуры.

Пример двухколоночного лайаута карточек:

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


  
    Первая карточка
  
  
    Вторая карточка

Использование Flexbox для вложенных карточек:


  Карточка 1
  Карточка 2
  Карточка 3
  • flex: '1 1 300px' — позволяет карточкам гибко растягиваться, но не быть меньше 300px.
  • gap={2} — задает отступы между карточками без использования внешних margin.

Вложенные элементы и сложные комбинации

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

Пример карточки с аватаром, рейтингом и кнопками:

import Avatar from '@mui/material/Avatar';
import IconButton from '@mui/material/IconButton';
import FavoriteIcon from '@mui/icons-material/Favorite';
import StarIcon from '@mui/icons-material/Star';


  }
    title="Название карточки"
    subheader="Дата публикации"
  />
  
    
      Подробное описание карточки, включая текст и возможные списки.

Адаптивные карточки

Для сложных интерфейсов важно, чтобы карточки корректно отображались на разных устройствах. MUI позволяет использовать breakpoints для настройки поведения карточек.


  Содержимое карточки
  • xs — ширина для мобильных устройств.
  • sm и md — для планшетов и десктопов.
  • Карточка автоматически подстраивается под размеры экрана.

Использование styled и sx для кастомизации

MUI предоставляет два подхода для кастомного оформления карточек:

  1. sx — быстрые инлайновые стили.
  2. styled — создание переиспользуемых компонентов с индивидуальным стилем.

Пример с sx:


  Контент карточки

Пример с styled:

import { styled } from '@mui/material/styles';
import Card from '@mui/material/Card';

const CustomCard = styled(Card)(({ theme }) => ({
  borderRadius: theme.spacing(2),
  boxShadow: theme.shadows[5],
  transition: 'transform 0.2s',
  '&:hover': {
    transform: 'scale(1.05)',
  },
}));

Интеграция с сеткой Masonry

Для создания сложных асимметричных лайаутов карточек MUI предоставляет компонент Masonry:

import Masonry from '@mui/lab/Masonry';


  Карточка 1
  Карточка 2
  Карточка 3
  Карточка 4
  • columns задает количество колонок на разных разрешениях.
  • spacing — промежуток между карточками.
  • Подходит для галерей и динамически меняющихся контентов.

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

  • Использовать CardMedia с оптимизированными изображениями.
  • Минимизировать количество вложенных компонентов для сложных карточек.
  • Применять React.memo или useMemo для карточек, которые часто рендерятся.
Оглавление