@gravity-ui/uikit
Version:
Gravity UI base styling and components
66 lines (55 loc) • 5.7 kB
Markdown
# Modal
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`](./Portal.md) component.
With `Modal`, you can implement dialogs, alerts, confirmations, and more.
```tsx
import {Modal} from '@gravity-ui/uikit';
```
## Usage
```tsx
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 |