CardHeader, CardContent, CardActions

Библиотека MUI предоставляет мощные инструменты для построения интерфейсов на React. Компоненты CardHeader, CardContent и CardActions являются составными частями компонента Card, позволяя структурировать карточки данных в приложениях.

CardHeader

CardHeader используется для отображения верхней части карточки, обычно содержащей заголовок, подзаголовок и аватар. Основные свойства:

  • title — основной заголовок карточки. Может быть строкой или компонентом React.
  • subheader — подзаголовок, например, описание или дата.
  • avatar — компонент аватара (обычно Avatar из MUI), отображаемый слева.
  • action — компонент для размещения действий в правой части заголовка, например, кнопки.
  • disableTypography — отключает встроенную типографику, позволяя полностью управлять стилями заголовка и подзаголовка.

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

import { Card, CardHeader, Avatar, IconButton } from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';

<Card>
  <CardHeader
    avatar={<Avatar alt="User" src="/static/images/avatar/1.jpg" />}
    action={
      <IconButton>
        <MoreVertIcon />
      </IconButton>
    }
    title="Заголовок карточки"
    subheader="Подзаголовок или дата"
  />
</Card>

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

  • Автоматическое выравнивание заголовка и подзаголовка.
  • Возможность добавления интерактивных элементов через action.
  • Полная стилизация с помощью системы sx или styled.

CardContent

CardContent предназначен для основной информации внутри карточки: текста, таблиц, изображений или любых React-компонентов.

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

  • Создаёт внутренние отступы и обеспечивает согласованную типографику.
  • Можно вкладывать любой JSX-контент, включая списки и медиаконтент.
  • Поддерживает системное свойство sx для кастомизации стилей.

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

import { Card, CardContent, Typography } from '@mui/material';

<Card>
  <CardContent>
    <Typography variant="h6" component="div">
      Основная информация
    </Typography>
    <Typography variant="body2" color="text.secondary">
      Здесь можно разместить описание, текст или другие элементы интерфейса.
    </Typography>
  </CardContent>
</Card>

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

  • Внутренние отступы (padding) настраиваются через sx={{ padding: 2 }}.
  • Поддержка разных вариантов типографики через компонент Typography.
  • Легко комбинируется с CardMedia для отображения изображений.

CardActions

CardActions располагается внизу карточки и служит для размещения интерактивных элементов: кнопок, иконок и ссылок.

Ключевые свойства:

  • disableSpacing — отключает автоматические отступы между действиями.
  • sx — позволяет изменять отступы, выравнивание и другие стили.
  • Можно размещать несколько элементов, которые автоматически выравниваются по горизонтали.

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

import { Card, CardActions, Button } from '@mui/material';

<Card>
  <CardActions>
    <Button size="small">Поделиться</Button>
    <Button size="small">Подробнее</Button>
  </CardActions>
</Card>

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

  • Компоненты автоматически располагаются горизонтально с отступами.
  • Возможна кастомизация выравнивания через justifyContent в sx.
  • Поддержка интерактивности и событий через стандартные props React (onClick и др.).

Комбинирование CardHeader, CardContent и CardActions

Эти три компонента часто используются вместе для создания полноценной карточки:

import { Card, CardHeader, CardContent, CardActions, Avatar, IconButton, Typography, Button } from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';

<Card sx={{ maxWidth: 345 }}>
  <CardHeader
    avatar={<Avatar alt="User" src="/static/images/avatar/1.jpg" />}
    action={
      <IconButton>
        <MoreVertIcon />
      </IconButton>
    }
    title="Заголовок карточки"
    subheader="Подзаголовок"
  />
  <CardContent>
    <Typography variant="body2" color="text.secondary">
      Здесь располагается текстовое содержимое карточки. Можно использовать списки, ссылки и даже вложенные компоненты.
    </Typography>
  </CardContent>
  <CardActions>
    <Button size="small">Поделиться</Button>
    <Button size="small">Подробнее</Button>
  </CardActions>
</Card>

Особенности сочетания:

  • CardHeader задаёт контекст карточки.
  • CardContent содержит основную информацию.
  • CardActions обеспечивает интерактивность.
  • Единый компонент Card сохраняет стили и размеры, а отдельные части остаются полностью кастомизируемыми через sx, styled или классические CSS-классы.

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

Оглавление