Overlay и backdrop

Overlay и Backdrop — это базовые строительные блоки интерфейсов, обеспечивающие работу всплывающих элементов, таких как модальные окна, диалоговые окна, выпадающие панели и тултипы. В Radix UI они реализуются через компоненты с высоким уровнем контроля над поведением, доступностью и стилизацией.

Overlay

Компонент Overlay отвечает за создание поверхностного слоя поверх основной страницы. Он применяется для затемнения или блокировки взаимодействия с контентом, находящимся за всплывающим элементом.

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

  • asChild — позволяет использовать пользовательский элемент вместо стандартного
    .
  • forceMount — компонент монтируется в DOM независимо от состояния видимости.
  • style и className — настраиваемые стили для визуального оформления.

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

import * as Dialog from '@radix-ui/react-dialog';


  Открыть модальное окно
  
    
    
      Содержимое модального окна

В этом примере Dialog.Overlay создаёт полупрозрачный слой, который блокирует взаимодействие с остальной страницей. Ключевое свойство className="overlay" позволяет подключить CSS-анимации для плавного появления и скрытия.

Стилизация и анимация Overlay:

.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  transition: opacity 0.2s ease;
}

Использование backdrop-filter позволяет добавлять размытие фона, создавая эффект «матового стекла».

Backdrop

Компонент Backdrop чаще применяется совместно с Overlay для более сложных интерфейсов, где требуется управлять кликами или фокусом. Он представляет собой слой, который перехватывает события клика, предотвращая их распространение на элементы страницы.

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

  • Может использоваться для закрытия диалога при клике на фон.
  • Обеспечивает корректную работу с фокусом и доступностью.
  • Часто реализуется через комбинацию Overlay и обработчиков событий.

Пример с обработкой закрытия по клику:

 setOpen(false)}
/>

Здесь обработчик onClick позволяет закрывать модальное окно при клике на затемнённый фон, создавая привычное поведение интерфейса.

Доступность и управление фокусом

Radix UI уделяет большое внимание a11y. Overlay и Backdrop автоматически обеспечивают:

  • Фокус-трап: при открытии модального окна фокус автоматически перемещается внутрь окна, предотвращая случайное взаимодействие с контентом за ним.
  • Закрытие через Escape: встроенная поддержка клавиши Escape для закрытия всплывающих элементов.
  • ARIA-атрибуты: компоненты имеют корректные role и aria-* атрибуты для экранных читалок.

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

  1. Использовать Portal для Overlay — это гарантирует, что слой всегда рендерится поверх всего контента страницы.
  2. Анимация появления — плавное изменение opacity и transform повышает качество UX.
  3. Контроль кликов вне области — обработчики на Overlay позволяют закрывать окна кликабельным фоном, но при этом можно исключить клики по внутреннему контенту через stopPropagation.
  4. Комбинирование с другими компонентами Radix — Overlay идеально интегрируется с Dialog, Popover и Tooltip, обеспечивая единый подход к всплывающим элементам.

Пример комплексного модального окна


  Открыть
  
    
    
      Заголовок окна
      Описание контента модального окна

Здесь Dialog.Portal выводит Overlay и Content поверх страницы, обеспечивая независимость от основного DOM, плавные анимации и корректное управление фокусом.

Оглавление