Modal

В Chakra UI компонент Modal используется для создания модальных окон, которые перекрывают основное содержимое страницы и привлекают внимание пользователя к важной информации или действиям. Он полностью управляемый и поддерживает доступность (ARIA), плавные анимации и адаптивность под мобильные устройства.

Базовая структура модального окна включает несколько ключевых компонентов:

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalCloseButton,
  ModalBody,
  ModalFooter,
  Button,
  useDisclosure
} from "@chakra-ui/react";

function Example() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onCl ick={onOpen}>Открыть модальное окно</Button>

      <Modal isOpen={isOpen} onCl ose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>Заголовок модального окна</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            Содержимое модального окна
          </ModalBody>
          <ModalFooter>
            <Button colorScheme="blue" mr={3} onCl ick={onClose}>
              Закрыть
            </Button>
            <Button variant="ghost">Дополнительное действие</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}

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

  • Modal – корневой компонент, оборачивающий все элементы модального окна. Принимает isOpen для управления состоянием и onClose для обработки закрытия.
  • ModalOverlay – полупрозрачный фон, блокирующий взаимодействие с остальной страницей. Обычно располагается под ModalContent.
  • ModalContent – основной контейнер модального окна, содержит все визуальные элементы.
  • ModalHeader – заголовок окна.
  • ModalCloseButton – кнопка закрытия, автоматически привязана к onClose.
  • ModalBody – основная часть с содержимым, текстом или формами.
  • ModalFooter – футер для кнопок действий.

Управление состоянием модального окна

Для управления открытием и закрытием используют хук useDisclosure:

const { isOpen, onOpen, onClose } = useDisclosure();
  • isOpen – логическое значение, указывающее, открыто ли окно.
  • onOpen – функция для открытия модального окна.
  • onClose – функция для закрытия модального окна.

Можно также управлять модалкой через состояние React:

const [isOpen, setIsOpen] = useState(false);
<Button onCl ick={() => setIsOpen(true)}>Открыть</Button>
<Modal isOpen={isOpen} onCl ose={() => setIsOpen(false)}>...</Modal>

Анимации и переходы

Chakra UI по умолчанию использует framer-motion для плавных анимаций появления и исчезновения модальных окон. Можно управлять анимациями через пропсы motionPreset:

<Modal isOpen={isOpen} onCl ose={onClose} motionPreset="slideInBottom">

Доступные варианты:

  • slideInBottom – анимация с выдвижением снизу.
  • scale – плавное появление с увеличением масштаба.

Центрирование и размеры

ModalContent поддерживает пропсы для управления размерами и позиционированием:

<ModalContent maxW="xl" borderRadius="md">
  • maxW – максимальная ширина окна (xs, sm, md, lg, xl, full).
  • borderRadius – скругление углов.
  • size (в Modal) – предварительно заданные размеры: xs, sm, md, lg, xl, full.

Модальное окно по умолчанию центрировано по экрану, но можно использовать isCentered для точного центрирования:

<Modal isOpen={isOpen} onCl ose={onClose} isCentered>

Работа с фокусом и доступностью

Chakra UI обеспечивает автоматическое управление фокусом при открытии модалки и возвращение фокуса к элементу, вызвавшему модалку. Для управления элементами внутри окна используют initialFocusRef и finalFocusRef:

const initialRef = useRef();
<Modal isOpen={isOpen} onCl ose={onClose} initialFocusRef={initialRef}>
  <ModalBody>
    <Input ref={initialRef} placeholder="Фокус при открытии" />
  </ModalBody>
</Modal>

Вложенные и асинхронные модальные окна

Chakra UI поддерживает вложенные модальные окна, однако стоит учитывать порядок слоёв. Каждый Modal создаёт отдельный портальный слой (Portal).

Для асинхронного контента можно использовать isLoading на кнопках или условно рендерить ModalBody после загрузки данных:

<ModalBody>
  {loading ? <Spinner /> : <Form />}
</ModalBody>

Настройка закрытия

Модальное окно можно закрывать разными способами:

  • Кнопка ModalCloseButton
  • Клик на ModalOverlay (по умолчанию true, можно отключить через closeOnOverlayClick={false})
  • Клавиша Escape (по умолчанию true, можно отключить через closeOnEsc={false})
<Modal isOpen={isOpen} onCl ose={onClose} closeOnOverlayClick={false}>

Интеграция с формами и кнопками

Модальные окна часто используются для форм. ModalBody удобно комбинировать с компонентами Input, Textarea, Select и кнопками из Chakra UI:

<ModalBody>
  <FormControl>
    <FormLabel>Имя</FormLabel>
    <Input placeholder="Введите имя" />
  </FormControl>
  <FormControl mt={4}>
    <FormLabel>Электронная почта</FormLabel>
    <Input type="email" placeholder="Введите email" />
  </FormControl>
</ModalBody>

ModalFooter обычно содержит кнопки сохранения и отмены:

<ModalFooter>
  <Button colorScheme="blue" mr={3}>Сохранить</Button>
  <Button variant="ghost" onCl ick={onClose}>Отмена</Button>
</ModalFooter>

Полезные приёмы

  • Использовать useDisclosure для управления состоянием нескольких модальных окон.
  • Комбинировать с Portal для рендеринга в отдельном слое и избежания конфликтов стилей.
  • Управлять фокусом через initialFocusRef для улучшения UX.
  • Применять motionPreset для разнообразных эффектов появления.
  • Использовать условный рендеринг для загрузки данных перед открытием окна.

Chakra UI делает работу с модальными окнами простой, гибкой и полностью доступной, обеспечивая единообразный интерфейс и поддержку лучших практик UX.

Оглавление