Modal
メンテナー:
amje
disableBodyScrollLock
The Modal component serves as base for creating pop-up windows with a backdrop above the rest of the content on a page.
It disables scrolling while opening and manages focus for content. The Modal child components are rendered inside the Portal component.
With Modal, you can implement dialogs, alerts, confirmations, and more.
import {Modal} from '@gravity-ui/uikit';
Usage
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>
Properties
| Name | Description | Type | Default |
|---|---|---|---|
| autoFocus | While open, the focus will be set to the first interactive element in the content | boolean | true |
| children | Any React content | React.ReactNode | |
| className | class HTML attribute for the root node | string | |
| container | DOM element to which component is mounted via Portal | HTMLElement | document.body |
| contentClassName | class HTML attribute for the content node | string | |
| disableBodyScrollLock | Disables locking scroll while open | boolean | false |
| disableEscapeKeyDown | Disables triggering close on Esc | boolean | false |
| disableOutsideClick | Disables triggering close on outside clicks | boolean | false |
| disablePortal | Disables using Portal | boolean | false |
| focusTrap | Enables focus trapping behavior | boolean | true |
| keepMounted | Modal will not be removed from the DOM upon hiding | boolean | false |
| onClose | Handles Modal close event | Function | |
| onEnterKeyDown | Enter press event handler | Function | |
| onEscapeKeyDown | Esc press event handler | Function | |
| onTransitionEnter | Open transition start event handler | Function | |
| onTransitionExit | Close transition start event handler | Function | |
| onTransitionEntered | Open transition end event handler | Function | |
| onTransitionExited | Close transition end event handler | Function | |
| onOutsideClick | Outside click event handler | Function | |
| open | Manages Modal visibility | boolean | false |
| qa | Test attribute (data-qa) | string | |
| restoreFocusRef | Element the focus will be restored to | React.RefObject | |
| style | style HTML attribute for the root node | string | |
| aria-label | aria-label HTML attribute to describe Modal | string | |
| aria-labelledby | ID of the visible Modal caption element | string | |
| contentOverflow | Determines whether the Modal has a scroll indicator inside or gets larger with the content | visible auto | visible |
CSS API
| Name | Description |
|---|---|
--g-modal-margin | Margin around the Modal content |
--g-modal-border-radius | Modal content border radius |
--g-modal-width | Modal content width |
--g-modal-max-width | Modal content max width |
--g-modal-height | Modal content height |
--g-modal-max-height | Modal content max height |