Display popup content that requires attention or provides additional information.
Use open
control whether Modal
is displayed.
useModal
Use hooks
for easier control Modal
.
Hide all action buttons.
Disable one of the buttons.
Custom width
or className
.
Whether it is desktop or mobile, the content beyond the scope has been well handled.
Modal.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
open | open or close | boolean | - | false |
onOpen | open event | () => void | - | - |
onClose | open event | () => void | - | - |
width | width of the modal dialog | string | - | 26rem |
wrapClassName | className of the modal dialog | string | - | - |
disableBackdropClick | click background and don't close | boolean | - | false |
... | native props | HTMLAttributes | 'autoFocus', 'name', 'className', ... | - |
Modal.Title.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
... | native props | HTMLAttributes | 'id', 'className', ... | - |
Modal.Subtitle.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
... | native props | HTMLAttributes | 'id', 'className', ... | - |
Modal.Content.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
... | native props | HTMLAttributes | 'id', 'className', ... | - |
Modal.Action.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
passive | display passive mode | boolean | - | false |
disabled | disable current action | boolean | - | false |
onClick | click handler | (event: ModalActionEvent) => void | - | - |
loading | show loading | boolean | - | false |
... | native props | ButtonHTMLAttributes | 'id', 'className', ... | - |
useModal
type useModal = (
initialVisible: boolean,
) => {
visible: boolean
setVisible: Dispatch<SetStateAction<boolean>>
currentRef: MutableRefObject<boolean>
bindings: {
open: boolean
onClose: () => void
}
}
ModalActionEvent
type ModalActionEvent = MouseEvent<HTMLButtonElement> & {
close: () => void
}