Skip to content

wired-dialog.md

Latest commit

 

History

History
51 lines (36 loc) · 1.18 KB

wired-dialog.md

File metadata and controls

51 lines (36 loc) · 1.18 KB
Raw

wired-dialog

Hand-drawn sketchy Dialog web component.

For demo and view the complete set of wired-elememts: wiredjs.com

Usage

Add wired-elements to your JavaScript project:

npm i wired-elements

Import module in your code:

import { WiredDialog } from 'wired-elements';
// or
import { WiredDialog } from 'wired-elements/lib/wired-dialog.js';

Or load directly into your HTML page:

<script type="module" src="https://unpkg.com/wired-elements/lib/wired-dialog.js?module"></script>

Use it in your HTML:

<wired-dialog>
  <p>
    Dialog content here
  </p>
  <div style="text-align: right; padding: 30px 16px 16px;">
    <wired-button id="closeDialog">Close dialog</wired-button>
  </div>
</wired-dialog>

Properties

elevation - Number between 1 and 5 (inclusive) that gives the sketchy link underline a height. Default value is 1.

open - Boolean value telling dialog if it's showing or not.

Custom CSS Properties

--wired-dialog-z-index - Sets the z-index of the dialog

License

MIT License (c) Preet Shihn