@pnx-mixtape/dialog

dialog component

Usage no npm install needed!

<script type="module">
  import pnxMixtapeDialog from 'https://cdn.skypack.dev/@pnx-mixtape/dialog';
</script>

README

@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';
  • Sass/Eyeglass: @import '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

<a href="#example-dialog" class="button button--primary js-dialog-toggle">Dialog trigger</a>

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