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

<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
`opened`	`boolean`	Whether the modal is currently open or not