@swivel-ui/ui/dialog

Dialog

The ui-dialog element creates a fully accessible dialog UI. By default it will create a backdrop, move the focus into the dialog when opened and trap the focus within the dialog. You can fill a ui-dialog with any content you like, but there do exist templates, as well as default styles, for a couple of elements:

(The templates can be imported from @swivel-finance/ui/elements/dialog/index.js)

• dialogHeader: creates a header element with the ui-dialog-header class name
• dialogContent: creates a div element with the ui-dialog-content class name
• dialogFooter: creates a footer element with the ui-dialog-footer class name

When a ui-dialog is closed, it emits a DialogResultEvent which can be used to pass data from a dialog back to the invoking code. The event has the type: 'ui-dialog-result' and, being a CustomEvent, has a detail property of the following shape:

    {
      target: DialogElement<T>;
      result?: T;
    }
    

If a ui-dialog is dismissed (using the close button in the dialog header), cancelled (using a cancel button) or closed by pressing ESCAPE, loosing focus or clicking the backdrop, the result property of the event will be set to undefined.

If a ui-dialog is confirmed (by pressing a confirm button) then the result property of the event will be set to the ui-dialog's result property. More on this below.

To connect a ui-dialog with a button or other clickable element, give the trigger an id attribute and reference it via the ui-dialog's trigger attribute/property:

    <button type="button" id="my-dialog-button">Show Dialog</button>

    <ui-dialog id="my-dialog" trigger="my-button-button">

      <header class="ui-dialog-header">
        <h2 class="ui-dialog-title" id="my-dialog-title">Lorem</h2>
        <button type="button" aria-label="close dialog">
          <ui-icon name="times"></ui-icon>
        </button>
      </header>

      <div class="ui-dialog-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </div>

      <footer class="ui-dialog-footer">
        <button type="button">Cancel</button>
        <button type="button" class="primary">OK</button>
      </footer>

    </ui-dialog>
    

Alternatively, you can give your ui-dialog element an id attribute and reference it via the button's aria-controls attribute:

    <button type="button" aria-controls="my-dialog">Show Dialog</button>

    <ui-dialog id="my-dialog">
      ...
    </ui-dialog>
    

Component Example