Backdrop и его настройка

Backdrop — это компонент библиотеки MUI (Material-UI), который используется для создания затемнённого или полупрозрачного фона поверх интерфейса, обычно для привлечения внимания к модальному контенту или блокировки взаимодействия с основной страницей. Он часто применяется вместе с Modal, Drawer или Dialog, но может использоваться и самостоятельно.

Импорт и базовое использование

Для начала нужно импортировать компонент:

import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import { useState } from 'react';

Простейший пример:

function SimpleBackdrop() {
  const [open, setOpen] = useState(false);

  const handleToggle = () => {
    setOpen(!open);
  };

  return (
    

      
      
        
      
    

  );
}

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

  • open — состояние видимости Backdrop.
  • style — позволяет задать стили, например, цвет текста, z-index.
  • onClick — обработчик клика по затемнённому фону, часто используется для закрытия Backdrop.
  • Внутри Backdrop можно размещать любую визуальную нагрузку, например индикаторы загрузки (CircularProgress).

Свойства Backdrop

Backdrop поддерживает несколько важных свойств, которые обеспечивают гибкость использования:

  1. open (boolean) Определяет, видим ли Backdrop. Без установки в true компонент не отображается.

  2. invisible (boolean) Делает фон полностью прозрачным, оставляя функциональность блокировки кликов. Полезно для ситуаций, когда нужно блокировать взаимодействие с интерфейсом без визуального затемнения.

    
  Контент

  3. sx / style Позволяет кастомизировать внешний вид с помощью MUI sx или стандартного style. Например, можно изменить прозрачность или цвет фона:

    
  Загрузка...

  4. transitionDuration (number | { enter, exit }) Настройка времени анимации появления и скрытия. Можно указать отдельные значения для enter и exit:

    
  Контент

  5. onClick Используется для закрытия или других действий при клике на фон.

Интеграция с модальными компонентами

Backdrop часто применяется совместно с модальными окнами. В MUI Modal автоматически использует Backdrop, но его можно настроить или заменить.

Пример с Modal:

import Modal from '@mui/material/Modal';

function ModalWithBackdrop() {
  const [open, setOpen] = useState(false);

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

  return (
    

      
      
        

          Контент модального окна
        

      
    

  );
}

Особенности интеграции:

  • BackdropProps позволяет полностью управлять стилем и поведением Backdrop внутри модальных компонентов.
  • Параметр transitionDuration синхронизирует анимацию Backdrop с анимацией модального окна.

Настройка уровней слоёв и прозрачности

Компонент Backdrop имеет высокий z-index по умолчанию, чтобы перекрывать все элементы страницы. В MUI это значение задаётся через theme.zIndex.backdrop, что позволяет гибко управлять порядком отображения слоёв в масштабных интерфейсах.

Пример кастомного z-index:


  Загрузка...

Управление интерактивностью

  • invisible полезен для случаев, когда нужно заблокировать пользовательский ввод, но не затемнять интерфейс.
  • В сочетании с onClick можно создать поведение, при котором Backdrop служит только для перехвата кликов вне активного контента.

Практические советы по использованию

  • Для индикаторов загрузки обычно рекомендуется размещать CircularProgress внутри Backdrop.
  • Использование sx предпочтительнее style при работе с MUI, так как позволяет использовать тему и динамические значения.
  • Управление временем анимации помогает создавать плавные интерфейсы, особенно при сочетании с Modal или Drawer.
  • Не рекомендуется использовать Backdrop для постоянного затемнения интерфейса без явной причины, чтобы не ухудшать UX.
Оглавление