Dialog и его конфигурация

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

Базовая структура компонента:

import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';

function MyDialog({ open, onClose }) {
  return (
    
      Заголовок окна
      
        Содержимое диалога
      
      
        
        
      
    
  );
}

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

  • open – булево значение, определяющее видимость окна.
  • onClose – функция, вызываемая при закрытии окна (например, по клику вне диалога или на кнопку закрытия).
  • maxWidth – задает максимальную ширину диалога ('xs' | 'sm' | 'md' | 'lg' | 'xl' | false).
  • fullWidth – растягивает диалог по ширине до maxWidth.
  • fullScreen – делает диалог полноэкранным, удобно для мобильных устройств.

Структура и вложенные компоненты

DialogTitle – заголовок диалога. Рекомендуется использовать для описания цели окна. DialogContent – основной контент: текст, формы, таблицы, графики. DialogActions – область действий: кнопки подтверждения, отмены, навигации.

Для сложного контента можно использовать любые MUI-компоненты внутри DialogContent, включая TextField, Checkbox, Select и контейнеры Box или Grid.


  
    
    
     Подписка на новости

Управление открытием и закрытием

Для контролируемого диалога используется состояние в React:

const [open, setOpen] = React.useState(false);


 setOpen(false)} />

onClose срабатывает при:

  • нажатии на область вне диалога (backdropClick)
  • нажатии клавиши Esc (escapeKeyDown)

Можно отдельно обработать эти события:

 {
    if (reason !== 'backdropClick') {
      setOpen(false);
    }
  }}
>

Настройка внешнего вида

Dialog поддерживает кастомизацию через систему sx, styled и тему MUI.

Внутри DialogContent можно настраивать прокрутку с помощью свойства scroll:

  • 'body' – скроллит весь диалог
  • 'paper' – скролл только внутри контента

Диалоги с формами и подтверждением действий

Частая практика — использовать Dialog для подтверждения критических операций. Для этого применяют комбинацию DialogTitle, DialogContentText и кнопок в DialogActions:


  Удаление элемента
  
    
      Вы уверены, что хотите удалить этот элемент? Это действие необратимо.

Адаптивность и полноэкранные диалоги

Для мобильных устройств удобно использовать fullScreen в сочетании с медиазапросами из MUI:

import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles';

const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));

Диалог с динамическим содержимым

Содержимое диалога может рендериться динамически, что удобно для форм, где поля зависят от выбранного объекта:


  {selectedItem ? `Редактировать ${selectedItem.name}` : 'Создать элемент'}
  
    {selectedItem ? (
      
    ) : (
      
    )}

Закрепленные элементы и модальные поведения

Для фиксирования кнопок или элементов внутри диалога используют DialogActions с position: sticky через sx:

Полезные советы по производительности

  • Не рендерить тяжелые компоненты внутри диалога до момента открытия (lazy rendering).
  • Использовать TransitionComponent для анимаций появления/исчезновения (Slide, Fade).
  • Минимизировать количество вложенных компонентов для плавного отображения на слабых устройствах.
Оглавление