Modal
The Modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
import React from 'react';
import {
Button,
Modal,
ModalBody,
ModalFooter,
ModalHeader,
ModalTitle,
ModalSubtitle,
ModalDivider,
Typography,
Icon,
} from '@qtm/react2';
const [open, setOpen] = React.useState(false);
<Button
variant="filled"
color="primary"
onClickEvent={() => setOpen(true)}
>
Open modal
</Button>
<Modal open={open} onCloseModal={() => setOpen(false)}>
<ModalHeader>
<ModalTitle>
<Icon
icon="warning"
classes="text-primary-500 dark:text-bluegrey-25"
/>
<div>
<Typography variant="heading-6">Dialog Modal</Typography>
<ModalSubtitle>Caption placeholder</ModalSubtitle>
</div>
</ModalTitle>
</ModalHeader>
<ModalBody>
<Typography variant="body-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
doloribus vero officia molestias quam animi dolor atque temporibus,
voluptatibus inventore, fugiat minima consectetur veniam repudiandae
voluptas iusto nostrum. Enim, quos.
</Typography>
<Typography variant="body-1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam
doloribus vero officia molestias quam animi dolor atque temporibus,
voluptatibus inventore, fugiat minima consectetur veniam repudiandae
voluptas iusto nostrum. Enim, quos.
</Typography>
</ModalBody>
<ModalDivider />
<ModalFooter classes="justify-between">
<Button variant="ghost" color="primary" onClickEvent={() => setOpen(false)}>
Cancel
</Button>
<Button variant="filled" color="primary" onClickEvent={() => setOpen(false)}>
Confirm
</Button>
</ModalFooter>
</Modal>
Sizes
Modal are available in three size: small, medium and large. You can use the attribute size to control width of modal.
import { Modal } from '@qtm/react2';
<Modal size="small">...</Modal>
<Modal size="medium">...</Modal>
<Modal size="large">...</Modal>
Event handling
The Modal component provides several event handlers to manage user interactions:
onCloseModal
Triggered when the modal is closed. This can happen in several ways:
- When the close button in the header is clicked
- When the user presses the Escape key
- When the user clicks outside the modal content
const handleClose = () => {
console.log('Modal closed');
// Your logic here
};
<Modal
open={isOpen}
onCloseModal={handleClose}
>
{/* Modal content */}
</Modal>
ModalHeader onCloseButton
The ModalHeader component has its own close button that can trigger a separate callback:
const handleHeaderClose = () => {
console.log('Close button in header clicked');
// Your specific header close logic here
};
<ModalHeader onCloseButton={handleHeaderClose}>
<ModalTitle>Modal Title</ModalTitle>
</ModalHeader>
Note that when the close button in the header is clicked, both onCloseButton and the Modal's onCloseModal will be triggered.
API
QtmModal
| Property | Type | Default | Description |
|---|---|---|---|
| classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing | |
| open | boolean | false | If true, the modal is displayed |
| overlay | boolean | true | If false, the overlay modal is transparent |
| overlayStyle | string | list of classes to override the styles applied to the modal overlay. ex: bg-primary-500 opacity-50 | |
| size | "large" | "medium" | "small" | 'medium' | Set size for title and all buttons in modal |
| Event | Type | Description |
|---|---|---|
| onCloseModal | CustomEvent<any> | Callback fired when the modal is closed |
QtmModalHeader
| Property | Type | Default | Description |
|---|---|---|---|
| classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing | |
| closeIcon | boolean | true | if true, a close button is displayed |
| size | "large" | "medium" | "small" | the size of the modal header |
| Event | Type | Description |
|---|---|---|
| onClosedButton | CustomEvent<any> | callback fired when the close button is clicked |
QtmModalBody
| Property | Type | Default | Description |
|---|---|---|---|
| classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing |
QtmModalFooter
| Property | Type | Default | Description |
|---|---|---|---|
| classes | string | list of classes to override or extend the styles applied to the component. You can use available utility classes by importing |