Modal
A modal is a secondary window that communicates or provides an action inside the same process.
| install | yarn add @clayui/modal |
|---|---|
| version | 3.122.0 |
Stable3.122.0View in LexiconCHANGELOG
Modal
| Property | Description |
|---|---|
centerboolean | Flag indicating to vertically center the modal. |
containerElementRefReact.RefObject<Element> | Container element to render modal into. |
containerPropsIPortalBaseProps | Props to add to the The default value is {} |
disableAutoCloseboolean | A flag indicating if the modal shouldn't
be closed when either the ESC key is pressed
or when clicking outside the modal The default value is false |
size'full-screen' | 'lg' | 'sm' | The size of element modal. |
observerObserver | Observer is Modal's communication system with useModal
hook, adds observer from useModal hook here. |
zIndexnumber | Allows setting a custom z-index value, overriding the default one which is 1040, modal body z-index will be +10 of this value |
role | The default value is 'dialog' |
Modal.Body
| Property | Description |
|---|---|
iFramePropsReact.HTMLAttributes<HTMLIFrameElement> | Props to add to the iframe element The default value is {} |
scrollableboolean | Flag to indicate if body should be a fixed height with a scrollable overflow. |
urlstring | Url to place an iframe in the body of the modal. |
Modal.Footer
| Property | Description |
|---|---|
firstReact.ReactElement | Sets the elements that are positioned `first following the LTR direction on the footer. |
lastReact.ReactElement | Sets the elements that are positioned last following
the LTR direction on the footer. |
middleReact.ReactElement | Sets the elements that are positioned in the middle of the footer. |
Modal.Header
| Property | Description |
|---|---|
withTitleboolean | Flag for indicating if you want to use the Header its children being the title.
Set to false if you want to use this as a low-level component.The default value is true |
Modal.Item
| Property | Description |
|---|---|
shrinkboolean | Flag for indicating if item should autofitting the width |
Modal.ItemGroup
Extends from React.HTMLAttributes<HTMLDivElement>Modal.Subtitle
Extends from React.HTMLAttributes<HTMLDivElement>Modal.SubtitleSection
Extends from React.HTMLAttributes<HTMLDivElement>Modal.Title
Extends from React.HTMLAttributes<HTMLDivElement>Modal.TitleSection
Extends from React.HTMLAttributes<HTMLDivElement>Modal.TitleIndicator
Extends from React.HTMLAttributes<HTMLDivElement>