Компонент Modal в WordPress помогает создавать всплывающие окна, которые перекрывают остальной интерфейс, фокусируя внимание пользователя на критической информации или предложении сделать выбор. Модальные окна применяются, чтобы показать важные уведомления, запросить подтверждение или предоставить дополнительный функционал, который требует завершения до возвращения к основному содержимому.
Основные параметры Modal и их описание
aria.describedby
Атрибутaria-describedbyдля div-контейнера модального окна, который связывает модальное окно с другим элементом, описывающим его содержимое.- Тип:
string - Обязательный: Нет
- Тип:
aria.labelledby
Атрибутaria-labelledbyдля div-контейнера модального окна, позволяющий задать заголовок, не отображаемый визуально, но доступный для технологий экранного чтения.- Тип:
string - Обязательный: Нет
- Тип:
bodyOpenClassName
Класс, добавляемый к элементуbodyпри открытии модального окна.- Тип:
string - По умолчанию:
"modal-open"
- Тип:
className
Добавляет дополнительные классы к div-контейнеру модального окна.- Тип:
string - Обязательный: Нет
- Тип:
contentLabel
Альтернативный заголовок для модального окна, который добавляется какaria-labelдля повышения доступности.- Тип:
string - Обязательный: Нет
- Тип:
focusOnMount
Определяет элемент, на который будет установлен фокус при открытии окна. Значение может бытьtrue,false,'firstElement','firstContentElement'.- Тип:
boolean | string - По умолчанию:
true
- Тип:
headerActions
React-узел для дополнительных действий в верхней части окна рядом с кнопкой закрытия.- Тип:
ReactNode - По умолчанию:
null
- Тип:
isDismissible
Управляет возможностью закрытия окна с помощью кнопки закрытия.- Тип:
boolean - По умолчанию:
true
- Тип:
isFullScreen
Определяет, будет ли окно занимать весь экран.- Тип:
boolean - По умолчанию:
false
- Тип:
size
Размер окна:'small','medium','large','fill'.- Тип:
string - Обязательный: Нет
- Тип:
onRequestClose
Функция, вызываемая при закрытии окна.- Тип:
function - Обязательный: Да
- Тип:
overlayClassName
Дополнительный класс для div-оверлея окна.- Тип:
string - Обязательный: Нет
- Тип:
role
Определяет роль для модального окна.- Тип:
string - По умолчанию:
"dialog"
- Тип:
shouldCloseOnClickOutside
Управляет закрытием окна при клике за его пределами.- Тип:
boolean - По умолчанию:
true
- Тип:
shouldCloseOnEsc
Управляет закрытием окна при нажатии на клавишуEsc.- Тип:
boolean - По умолчанию:
true
- Тип:
style
Inline-стили для модального окна.- Тип:
object - Обязательный: Нет
- Тип:
title
Текст заголовка модального окна.- Тип:
string - Обязательный: Нет
- Тип:
__experimentalHideHeader
Если установлено вtrue, скрывает заголовок и кнопку закрытия. Параметр экспериментальный.- Тип:
boolean - По умолчанию:
false
- Тип:
Пример использования компонента Modal
import { useState } from 'react';
import { Button, Modal } from '@wordpress/components';
const CustomModalExample = () => {
const [isModalOpen, setModalOpen] = useState(false);
const openModal = () => setModalOpen(true);
const closeModal = () => setModalOpen(false);
return (
<>
<Button variant="primary" onClick={openModal}>
Открыть модальное окно
</Button>
{isModalOpen && (
<Modal
title="Подтверждение действия"
onRequestClose={closeModal}
className="custom-modal"
overlayClassName="custom-overlay"
bodyOpenClassName="custom-body-open"
isFullScreen={false}
size="medium"
shouldCloseOnClickOutside={true}
shouldCloseOnEsc={true}
aria.labelledby="modal-label"
contentLabel="Описание модального окна"
>
<p>Вы уверены, что хотите выполнить это действие?</p>
<Button variant="secondary" onClick={closeModal}>
Отмена
</Button>
<Button variant="primary" onClick={() => {
// Здесь логика выполнения действия
closeModal();
}}>
Подтвердить
</Button>
</Modal>
)}
</>
);
};
export default CustomModalExample;
Заключение
Компонент Modal в WordPress предлагает гибкие возможности для управления фокусом внимания пользователя.