2019-06-27 12:47:32 +00:00
|
|
|
# ModalDialog
|
|
|
|
|
|
|
|
ModalDialog is used for displaying modal dialogs
|
|
|
|
|
2019-11-21 13:25:25 +00:00
|
|
|
### Usage
|
2019-06-27 12:47:32 +00:00
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
import ModalDialog from "@appserver/components/modal-dialog";
|
2019-11-21 13:25:25 +00:00
|
|
|
```
|
2019-06-27 12:47:32 +00:00
|
|
|
|
2019-11-21 13:25:25 +00:00
|
|
|
```jsx
|
2020-09-09 18:49:25 +00:00
|
|
|
<ModalDialog visible={false} scale={false} displayType="auto" zIndex={310}>
|
|
|
|
<ModalDialog.Header>"Change password"</ModalDialog.Header>
|
|
|
|
<ModalDialog.Body>
|
2019-11-21 13:25:25 +00:00
|
|
|
<div>
|
|
|
|
Send the password change instruction to the{" "}
|
|
|
|
<a href="mailto:asc@story.book">asc@story.book</a> email address
|
|
|
|
</div>
|
2020-09-09 18:49:25 +00:00
|
|
|
</ModalDialog.Body>
|
|
|
|
<ModalDialog.Footer>
|
|
|
|
<Button
|
|
|
|
label="Send"
|
|
|
|
size="big"
|
|
|
|
primary={true}
|
|
|
|
onClick={() => alert("It's works!")}
|
|
|
|
/>
|
|
|
|
</ModalDialog.Footer>
|
|
|
|
</ModalDialog>
|
2019-06-27 12:47:32 +00:00
|
|
|
```
|
|
|
|
|
2019-11-21 13:25:25 +00:00
|
|
|
### Properties
|
2019-06-27 12:47:32 +00:00
|
|
|
|
2021-11-19 13:58:31 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| ------------------ | :------: | :------: | :----------------------: | :------: | ------------------------------------------------ |
|
|
|
|
| `visible` | `bool` | - | - | - | Display dialog or not |
|
|
|
|
| `displayType` | `oneOf` | - | `auto`, `modal`, `aside` | `auto` | Display type |
|
|
|
|
| `scale` | `bool` | - | - | - | Indicates the side panel has scale |
|
|
|
|
| `onClose` | `func` | - | - | - | Will be triggered when a close button is clicked |
|
|
|
|
| `zIndex` | `number` | - | - | `310` | CSS z-index |
|
|
|
|
| `modalBodyPadding` | `string` | - | - | `16px 0` | CSS padding props for modal body section |
|
|
|
|
| `asideBodyPadding` | `string` | - | - | `16px 0` | CSS padding props for aside body section |
|