Modal
The model component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
The component renders its children node in front of backdrop component. The model offers important features:
- Manages model stacking when one-at-a time just isn’t enough.
- Creates a backdrop, for disabling interaction below the modal.
- It disables scrolling of the page content while open.
- It provides manages moving to the modal content, and keeping it there until the modal is closed.
Basic Modal
Preview
Usage
import { Modal, Typography } from 'archi-ui'<Modal open={true}>
<Typography variant='h2'>This is Modal</Typography>
<Typography className="mt-2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam culpa aliquam aperiam commodi ullam iure laboriosam animi magni asperiores. Rem ratione odit explicabo ut eveniet illo eum dicta reprehenderit unde.</Typography>
</Modal>Nested Modal
Modals can be nested, for example a Select within a dialog, but stacking of more than two models, or any two models with a backdrop is discouraged.
Preview
Modal API
API reference docs for the React Modal component.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | A single child content element. |
| className | string | - | Override or extend the styles applied to the component |
| open | bool | - | If true, the component is shown. |
| disableEscapeKeyDown | bool | false | If true, hitting escape will not fire the onClose callback. |
| maxWidth | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'sm' | Determine the max-width of the modal. The modal width grows with the size of the screen. |
| onClose | func | - | Callback fired when the component is requests to be closed. Signature: function() => void. |
| onBackdropClick | func | - | A function is triggred if provided when backdrop is been clicked. |
| BackdropProps | object | - | Props applied to the Backdrop element. |
| hideBackdrop | bool | false | If true, the backdrop is not rendered. |
| disableScrollLock | bool | false | Disable the scroll lock behavior. |
Last updated on