75 lines
2.0 KiB
Plaintext
75 lines
2.0 KiB
Plaintext
---
|
|
class: ember
|
|
---
|
|
# ModalDialog
|
|
|
|
Consul UIs modal component is a thin wrapper around the excellent `a11y-dialog`. The
|
|
most common usage will be something like the below:
|
|
|
|
```hbs preview-template
|
|
<ModalDialog
|
|
@onclose={{noop}}
|
|
@onopen={{noop}}
|
|
@aria={{hash
|
|
label="Screenread name of the modal"
|
|
}}
|
|
as |modal|>
|
|
|
|
<!-- Save a reference to the modal component so we can call its methods -->
|
|
{{did-insert (set this 'modal' modal)}}
|
|
|
|
<BlockSlot @name="header">
|
|
<h2>
|
|
Modal Header
|
|
</h2>
|
|
</BlockSlot>
|
|
<BlockSlot @name="body">
|
|
<p>
|
|
Modal body
|
|
</p>
|
|
</BlockSlot>
|
|
<BlockSlot @name="actions">
|
|
<button type="button"
|
|
{{on "click" modal.close}}
|
|
>
|
|
Close modal
|
|
</button>
|
|
</BlockSlot>
|
|
</ModalDialog>
|
|
|
|
<button
|
|
type="button"
|
|
{{on 'click' (optional this.modal.open)}}
|
|
>
|
|
Open Modal
|
|
</button>
|
|
|
|
```
|
|
All modals work in tandem with `<ModalLayer />` to render modals. First of all ensure
|
|
you have a modal layer on the page (it doesn't have to be in the same
|
|
template)
|
|
|
|
```hbs
|
|
<ModalLayer />
|
|
```
|
|
|
|
Then all modals will be rendered into the `<ModalLayer />`.
|
|
|
|
## Arguments
|
|
|
|
| Argument | Type | Default | Description |
|
|
| --- | --- | --- | --- |
|
|
| `onopen` | `Function` | `undefined` | A function to call when the modal has opened |
|
|
| `onclose` | `Function` | `undefined` | A function to call when the modal has closed |
|
|
| `aria` | `Object` | `undefined` | A `hash` of aria properties used in the component, currently only label is supported |
|
|
| `open` | `Boolean` | `false` | Whether the modal should be initialized in its 'open' state. Useful if the modal should be controlled via handlebars conditionals. Please note this argument it not yet reactive, i.e. it is only checked on component insert not attribute update. An improvement here would be to respect this value during the update of the attribute. |
|
|
|
|
## Exports
|
|
|
|
| Name | Type | Description |
|
|
| --- | --- | --- |
|
|
| `open` | `Function` | Opens the modal dialog |
|
|
| `close` | `Function` | Closes the modal dialog |
|
|
|
|
|