# lit-dialog

> A dialog component using bootstrap's modal classes

Latest version **2.0.1** (published 2021-09-24) · ISC license · 0 weekly downloads

## Install

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

## Health

**Score 30/100 (F)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2021-09-24 |
| First published | 2021-03-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 19 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | magethle |
| Maintainers | magethle |
| Keywords | modal, dialog |

## Links

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

## Dependencies (1)

- [lit](https://npm.io/package/lit.md) ^2.0.0

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 2.0.1 (latest) — 2021-09-24
- 2.0.0 — 2021-09-24
- 1.0.9 — 2021-05-11
- 1.0.8 — 2021-05-11
- 1.0.7 — 2021-03-20
- 1.0.6 — 2021-03-06
- 1.0.5 — 2021-03-05
- 1.0.4 — 2021-03-05
- 1.0.3 — 2021-03-05
- 1.0.2 — 2021-03-05
- 1.0.1 — 2021-03-05
- 1.0.0 — 2021-03-05

## README

# lit-dialog
A simple webcomponent dialog using bootstrap's modal classes
  
Example  
  
1. Define your dialog:  

```javascript
import { html } from 'lit-html';
import { LitDialog } from 'lit-dialog';

export class ConfirmDialog extends LitDialog {

    renderContent() {
        return html`
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4>Dialog title</h4>
            </div>
            <div class="modal-body">
                <span>Confirm?</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" @click="${e => this.ok()}">
                    <span>Ok</span>
                </button>
            </div>            
        `;
    }

    ok() {
        this.resolve('ok');
    }

}

customElements.define('confirm-dialog', ConfirmDialog);
```  
  
2. Use it:
  
```javascript
await result = new ConfirmDialog().open();
```
  
Result:  
  
![Preview](img/dialog-screenshot.png)

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