UIKit
7.11.0
• ModalКомпоненты
UIKit
7.11.0
Date Components
3.1.0
Navigation
3.3.6
disableBodyScrollLock
import {Modal} from '@gravity-ui/uikit';
Компонент Modal
(модальное окно) используется для создания всплывающих окон, которые перекрывают основной контент страницы.
При открытии модального окна прокрутка страницы отключается, а фокус автоматически переводится на его содержимое. Дочерние компоненты Modal
рендерятся внутри компонента Portal
.
С Modal
можно создавать диалоги, алерты, подтверждения и другие элементы.
§Использование
import {useState} from 'react';
import {Button, Modal} from '@gravity-ui/uikit';
const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Open Modal</Button>
<Modal open={open} onClose={() => setOpen(false)}>
Content
</Modal>
§Свойства
Имя | Описание | Тип | Значение по умолчанию |
---|---|---|---|
autoFocus | В открытом состоянии фокус будет установлен на первый интерактивный элемент в содержимом. | boolean | true |
children | Любое содержимое React. | React.ReactNode | |
className | HTML-атрибут class для корневого узла. | string | |
container | DOM-элемент, в который монтируются дочерние элементы. | HTMLElement | document.body |
contentClassName | Атрибут class в HTML для узла с содержимым. | string | |
disableBodyScrollLock | Отключает блокировку прокрутки, пока модальное окно открыто. | boolean | false |
disableEscapeKeyDown | Отключает закрытие при нажатии на клавишу Esc . | boolean | false |
disableOutsideClick | Отключает закрытие элемента по клику вне его области. | boolean | false |
focusTrap | Включает фиксацию фокуса внутри элемента. | boolean | true |
keepMounted | Компонент Modal не будет удален из DOM при скрытии. | boolean | false |
onClose | Обработчик события закрытия Modal . | Function | |
onEnterKeyDown | Обработчик события нажатия на клавишу Enter . | Function | |
onEscapeKeyDown | Обработчик события нажатия на клавишу Esc . | Function | |
onTransitionEnter | Обработчик начала анимации открытия. | Function | |
onTransitionExit | Обработчик начала анимации закрытия. | Function | |
onTransitionEntered | Обработчик завершения анимации открытия. | Function | |
onTransitionExited | Обработчик завершения анимации закрытия. | Function | |
onOutsideClick | Обработчик события клика вне элемента. | Function | |
open | Управляет видимостью Modal . | boolean | false |
qa | Атрибут для тестирования (data-qa ). | string | |
restoreFocusRef | Элемент, на который вернется фокус. | React.RefObject | |
style | HTML-атрибут style для корневого узла. | string | |
aria-label | HTML-атрибут aria-label для описания Modal . | string | |
aria-labelledby | Идентификатор видимого элемента заголовка в Modal . | string | |
contentOverflow | Определяет, имеет ли Modal внутреннюю полосу прокрутки или увеличивается в размерах вместе с содержимым. | visible auto | visible |
§API CSS
Имя | Описание |
---|---|
--g-modal-margin | Отступ вокруг содержимого Modal . |
--g-modal-border-radius | Радиус скругления углов элемента с содержимым Modal . |