DialogTitle, DialogContent, DialogActions

В библиотеке MUI (Material-UI) для создания модальных окон и диалогов используется компонент Dialog, который организует структуру диалога и управляет его открытием и закрытием. Внутри Dialog часто применяются вспомогательные компоненты: DialogTitle, DialogContent и DialogActions. Каждый из них выполняет отдельную роль в построении интерфейса, обеспечивая консистентность и удобство для пользователя.

DialogTitle

Компонент DialogTitle отвечает за заголовок диалога. Он автоматически получает правильные отступы и стили, соответствующие Material Design.

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

import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';

<Dialog open={open} onCl ose={handleClose}>
  <DialogTitle>Заголовок диалога</DialogTitle>
</Dialog>

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

  • id – используется для доступности (aria-labelledby) и связывания заголовка с диалогом.
  • sx – возможность переопределения стилей через систему sx.
  • children – содержимое заголовка, обычно текст или компонент Typography.

DialogTitle можно комбинировать с иконками или кнопками закрытия. Для этого часто используют Flex-контейнеры:

<DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
  <span>Заголовок диалога</span>
  <IconButton onCl ick={handleClose}>
    <CloseIcon />
  </IconButton>
</DialogTitle>

DialogContent

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

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

import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';

<DialogContent dividers>
  <DialogContentText>
    Это основной текст диалога. Можно добавлять несколько абзацев, списки и другие компоненты.
  </DialogContentText>
</DialogContent>

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

  • dividers – добавляет горизонтальные разделители между заголовком и контентом, а также между контентом и действиями.
  • sx – позволяет кастомизировать отступы, высоту, ширину и другие стили.
  • Внутри DialogContent часто используется компонент DialogContentText для текстовых блоков, который добавляет правильные отступы и типографику.

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

<DialogContent>
  <TextField
    autoFocus
    margin="dense"
    label="Имя"
    type="text"
    fullWidth
    variant="outlined"
  />
  <TextField
    margin="dense"
    label="Email"
    type="email"
    fullWidth
    variant="outlined"
  />
</DialogContent>

DialogContent может быть прокручиваемым при большом объёме содержимого. Для этого используется свойство scroll="paper" или scroll="body" у родительского Dialog.

DialogActions

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

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

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

<DialogActions>
  <Button onCl ick={handleClose}>Отмена</Button>
  <Button onCl ick={handleSubmit} variant="contained">Сохранить</Button>
</DialogActions>

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

  • Автоматическое выравнивание кнопок по правому краю.
  • Можно применять sx для изменения расположения кнопок, например, центровки или распределения с равными отступами.
  • Поддерживает любые компоненты внутри, хотя чаще всего используются кнопки Button.

Пример кастомного выравнивания кнопок:

<DialogActions sx={{ justifyContent: 'space-between' }}>
  <Button onCl ick={handleClose}>Отмена</Button>
  <Button onCl ick={handleSubmit} variant="contained">Сохранить</Button>
</DialogActions>

Совместное использование

Комбинируя DialogTitle, DialogContent и DialogActions, создается полностью структурированный диалог с соблюдением принципов Material Design:

<Dialog open={open} onCl ose={handleClose}>
  <DialogTitle>Подтверждение действия</DialogTitle>
  <DialogContent dividers>
    <DialogContentText>
      Вы уверены, что хотите удалить этот элемент? Это действие необратимо.
    </DialogContentText>
  </DialogContent>
  <DialogActions>
    <Button onCl ick={handleClose}>Отмена</Button>
    <Button onCl ick={handleDelete} variant="contained" color="error">Удалить</Button>
  </DialogActions>
</Dialog>

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

  • Чёткое разделение заголовка, контента и действий.
  • Легкая поддержка доступности через aria-атрибуты.
  • Унификация внешнего вида в разных частях приложения.
  • Гибкость кастомизации через sx и собственные компоненты внутри блоков.

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

Оглавление