2.0.2 • Published 6 months ago

@pnx-mixtape/dialog v2.0.2

Weekly downloads
21
License
MIT
Repository
github
Last release
6 months ago

@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>
2.0.2

6 months ago

2.0.0-alpha.0

7 months ago

2.0.1

7 months ago

2.0.0

8 months ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

1.0.0-alpha.1

2 years ago

1.0.0-alpha.0

3 years ago

0.4.3

3 years ago

0.4.2

3 years ago

0.4.1

3 years ago

0.4.0

3 years ago

0.3.2

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.3

4 years ago

0.2.0

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago

0.0.15

4 years ago

0.0.14

4 years ago

0.0.13

4 years ago

0.0.12

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.7

5 years ago

0.0.6

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago