# wired-dialog

> Hand-drawn sketchy tabs - web component

Latest version **2.1.0** (published 2020-06-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install wired-dialog
pnpm add wired-dialog
yarn add wired-dialog
bun add wired-dialog
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score; popular repo.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2020-06-19 |
| First published | 2019-10-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 10850 |
| Author | Preet Shihn |
| Maintainers | shihn |
| Keywords | dialog, webcomponent, web component, rough, sketchy, hand-drawn, hand drawn |

## Links

- npm: https://www.npmjs.com/package/wired-dialog
- Repository: https://github.com/wiredjs/wired-elements
- Homepage: https://github.com/wiredjs/wired-elements#readme
- Issues: https://github.com/wiredjs/wired-elements/issues
- npm.io page: https://npm.io/package/wired-dialog

## Dependencies (2)

- [wired-card](https://npm.io/package/wired-card.md) ^2.1.0
- [lit-element](https://npm.io/package/lit-element.md) ^2.3.1

## Alternatives

- [byte-size](https://npm.io/package/byte-size.md) — 2.1M weekly downloads
- [speed-limiter](https://npm.io/package/speed-limiter.md) — 16.0K weekly downloads
- [@powersync/node](https://npm.io/package/@powersync/node.md) — 10.9K weekly downloads
- [@ledgerhq/coin-cardano](https://npm.io/package/@ledgerhq/coin-cardano.md) — 1.0K weekly downloads
- [@jayesol/jayeson.lib.streamfinder](https://npm.io/package/@jayesol/jayeson.lib.streamfinder.md) — 1.0K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2020-06-19
- 2.0.2 — 2020-03-15
- 2.0.0 — 2019-10-19
- 2.0.0-alpha.1 — 2019-10-18

## README

# wired-dialog
Hand-drawn sketchy Dialog web component.

For demo and view the complete set of wired-elememts: [wiredjs.com](http://wiredjs.com/)

## Usage

Add wired-dialog to your project:
```
npm wired-dialog
```
Import wired-dialog definition into your HTML page:
```html
<script type="module" src="wired-dialog/lib/wired-dialog.js"></script>
```
Or into your module script:
```javascript
import { WiredDialog } from "wired-dialog"
```

Use it in your web page:

```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](https://github.com/wiredjs/wired-elements/blob/master/LICENSE) (c) [Preet Shihn](https://twitter.com/preetster)

---
_Source: https://npm.io/package/wired-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._