Полноэкранные диалоги

Полноэкранные диалоги (Full-Screen Dialogs) в MUI представляют собой компонент Dialog, который занимает весь экран устройства, обеспечивая пользователю максимальное пространство для взаимодействия с содержимым. Такие диалоги чаще всего применяются для сложных форм, просмотров детальной информации или сценариев редактирования, когда стандартный модальный размер недостаточен.

Импорт и базовая структура

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

import * as React from 'react';
import Dialog from '@mui/material/Dialog';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Slide from '@mui/material/Slide';
import CloseIcon from '@mui/icons-material/Close';
import Button from '@mui/material/Button';

Анимация открытия и закрытия

MUI поддерживает плавные переходы для диалогов через компонент Transition. Чаще всего для полноэкранных диалогов используют сдвиг Slide:

const Transition = React.forwardRef(function Transition(props, ref) {
  return ;
});

direction="up" обеспечивает эффект выезжания диалога снизу вверх. Переход передается в компонент Dialog через свойство TransitionComponent.

Основная разметка диалога

export default function FullScreenDialog() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    

      
      
        
          
            
              
            
            
              Полноэкранный диалог
            
            
          
        
        

          {/* Контент диалога */}
        

      
    

  );
}

Ключевые моменты:

  • fullScreen — включает полноэкранный режим.
  • AppBar внутри диалога обеспечивает заголовок и кнопки управления.
  • Toolbar используется для правильного выравнивания кнопок и заголовка.
  • Кнопка CloseIcon часто располагается слева, кнопка действий (Сохранить) — справа.
  • Основное содержимое помещается в отдельный блок с отступами, чтобы не прилипало к краям экрана.

Адаптивность и стили

Полноэкранные диалоги автоматически подстраиваются под размеры экрана. Для мобильных устройств часто применяют медиазапросы, чтобы менять стиль заголовка или размеры кнопок.

Пример адаптивного AppBar:


  
    
      Полноэкранный диалог

Здесь для экранов xs (мобильные) применяется основной цвет и меньший шрифт, а для десктопов (md) — вторичный цвет и увеличенный размер текста.

Управление состоянием

Открытие и закрытие диалога контролируется через состояние компонента (useState). Для сложных форм часто применяют useReducer или интеграцию с Formik/React Hook Form для централизованного управления данными формы.

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

const handleToggle = () => setOpen(prev => !prev);

Интерактивность внутри диалога

  • Формы: можно использовать TextField, Select, Checkbox внутри контента.
  • Таблицы и списки: удобно размещать с горизонтальной прокруткой, так как диалог занимает всю ширину экрана.
  • Кнопки действий: желательно фиксировать AppBar, чтобы кнопки были всегда доступны.

Поддержка закрытия по клику вне диалога

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

 {
    if (reason !== 'backdropClick') handleClose();
  }}
  TransitionComponent={Transition}
>

Особенности производительности

Полноэкранные диалоги могут содержать большое количество элементов, поэтому важно:

  • Ленивая загрузка компонентов (React.lazy, Suspense) для тяжелого контента.
  • Минимизация ререндеров через React.memo.
  • Оптимизация изображений и таблиц с большим количеством данных.
Оглавление