@pnx-mixtape/dialog

Documentation and examples: CTA

Installation

npm install @pnx-mixtape/dialog --save-dev

How to use

CSS

• PostCSS workflow: @import '@pnx-mixtape/dialog';
• Native CSS: @import url('dist/dialog.css');
• Link tag: <link href="dist/dialog.css" rel="stylesheet" type="text/css">

Web Components

Web Components are self defined, simply import the desired feature. These do not use the Shadow DOM. External CSS applies.

• DialogBase import: import '@pnx-mixtape/dialog/DialogBase'; and be sure to include <mx-dialog> around the <dialog /> tag.
• The triggering element should either have aria-controls="[id]" or href="#[id]" where the ID matches the dialog (required).
• Use the [data-modal] attribute to trigger HTMLDialogElement.showModal() on open. When omitted HTMLDialogElement.show() is used.
• Add [data-close] to any button that should call HTMLDialogElement.close()

<button aria-controls="example-dialog" class="button button--primary">
  Dialog trigger
</button>
<mx-dialog id="example-dialog" data-modal>
  <dialog class="dialog">
    <button
      autofocus
      class="button button--icon-only button--secondary icon icon--close"
      data-close
    >
      Close dialog
    </button>
    <div class="dialog__content">
      <h2>Title</h2>
      <p>Body content.</p>
    </div>
  </dialog>
</mx-dialog>

See twig files for all HTML examples.

Vanilla JS (to be deprecated)

• ES6 import: import Dialog from '@pnx-mixtape/dialog';
• Script tag: <script src="dist/dialog.js" type="text/javascript"></script>

HTML

<button
  data-dialog
  aria-controls="example-dialog"
  class="button button--primary"
>
  Dialog trigger
</button>

<dialog class="dialog" id="example-dialog">
  <div class="dialog__content">
    <h2>Title</h2>
    <p>Body content.</p>
  </div>
</dialog>