<lit-modal></lit-modal> element expected to use as once instance per app.
npm i lit-modal
| Name | Prop/Attr | Type | Description |
|---|---|---|---|
open |
Attr | Boolean |
Open/close state |
closeBtnText |
Attr | String |
Text of default close btn |
useStandartCloseBtn |
Attr | Boolean |
Flag of using default close btn |
| Name | Default |
|---|---|
--dialog-overlap |
rgba(0,0,0,0.7) |
--dialog-background |
#fefefe |
--dialog-boxshadow |
rgba(0,0,0,0.7) |
--dialog-header-background |
#111 |
--dialog-header-color |
#fefefe |
--button-background |
#222 |
--button-background-hover |
#444 |
--button-border |
none |
--button-color |
#fefefe |
--button-padding |
5px 10px |
<!DOCTYPE html>
<html>
<body>
<div id = 'app'></div>
<script src = "demo.ts"></script>
</body>
</html>
import 'lit-modal';
import { html, render } from 'lit-html';
const header = html`Modal header`;
const content = html`Modal content`;
const footer = html`Modal footer`;
const modal = html`
<lit-modal open
.header = "${header}"
.content = "${content}"
.footer = "${footer}"
></lit-modal>
`;
render(modal, document.getElementById('app'));