Modal
yarn add @clayui/modal
A modal is a secondary window that communicates or provides an action inside the same process.
Stable3.69.0View in LexiconCHANGELOG
Modal
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
center | boolean | false | Flag indicating to vertically center the modal. | |
containerElementRef | React.RefObject<Element> | false | Container element to render modal into. | |
containerProps | IPortalBaseProps | false | {} | Props to add to the <ClayPortal/>. |
disableAutoClose | boolean | false | false | A flag indicating if the modal shouldn't be closed when either the ESC key is pressed or when clicking outside the modal |
size | Size | false | The size of element modal. | |
observer | Observer | true | Observer is Modal's communication system with `useModal` hook, adds observer from `useModal` hook here. | |
zIndex | number | false | Allows setting a custom z-index value, overriding the default one which is 1040, modal body z-index will be +10 of this value |
Modal.Body
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
iFrameProps | React.HTMLAttributes<HTMLIFrameElement> | false | {} | Props to add to the iframe element |
scrollable | boolean | false | Flag to indicate if body should be a fixed height with a scrollable overflow. | |
url | string | false | Url to place an iframe in the body of the modal. |
Modal.Footer
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
first | React.ReactElement | false | Sets the elements that are positioned `first following the LTR direction on the footer. | |
last | React.ReactElement | false | Sets the elements that are positioned `last` following the LTR direction on the footer. | |
middle | React.ReactElement | false | Sets the elements that are positioned in the middle of the footer. |
Modal.Header
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
withTitle | boolean | false | true | 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. |
Modal.Item
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
shrink | boolean | false | 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>