Modal

Maintainer:
amje
GitHub
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В открытом состоянии фокус будет установлен на первый интерактивный элемент в содержимом.booleantrue
childrenЛюбое содержимое React.React.ReactNode
classNameHTML-атрибут class для корневого узла.string
containerDOM-элемент, в который монтируются дочерние элементы.HTMLElementdocument.body
contentClassNameАтрибут class в HTML для узла с содержимым.string
disableBodyScrollLockОтключает блокировку прокрутки, пока модальное окно открыто.booleanfalse
disableEscapeKeyDownОтключает закрытие при нажатии на клавишу Esc.booleanfalse
disableOutsideClickОтключает закрытие элемента по клику вне его области.booleanfalse
focusTrapВключает фиксацию фокуса внутри элемента.booleantrue
keepMountedКомпонент Modal не будет удален из DOM при скрытии.booleanfalse
onCloseОбработчик события закрытия Modal.Function
onEnterKeyDownОбработчик события нажатия на клавишу Enter.Function
onEscapeKeyDownОбработчик события нажатия на клавишу Esc.Function
onTransitionEnterОбработчик начала анимации открытия.Function
onTransitionExitОбработчик начала анимации закрытия.Function
onTransitionEnteredОбработчик завершения анимации открытия.Function
onTransitionExitedОбработчик завершения анимации закрытия.Function
onOutsideClickОбработчик события клика вне элемента.Function
openУправляет видимостью Modal.booleanfalse
qaАтрибут для тестирования (data-qa).string
restoreFocusRefЭлемент, на который вернется фокус.React.RefObject
styleHTML-атрибут style для корневого узла.string
aria-labelHTML-атрибут aria-label для описания Modal.string
aria-labelledbyИдентификатор видимого элемента заголовка в Modal.string
contentOverflowОпределяет, имеет ли Modal внутреннюю полосу прокрутки или увеличивается в размерах вместе с содержимым.visible autovisible

API CSS

ИмяОписание
--g-modal-marginОтступ вокруг содержимого Modal.
--g-modal-border-radiusРадиус скругления углов элемента с содержимым Modal.