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

Vanilla JS

• 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>

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