lit-modal

Dialog window based on lit-element

Usage no npm install needed!

<script type="module">
  import litModal from 'https://cdn.skypack.dev/lit-modal';
</script>

README

LitModal

<lit-modal></lit-modal> element expected to use as once instance per app.

Install

npm i lit-modal

Properties/Attributes

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

Styles

| 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 |

Demo

HTML

<!DOCTYPE html>
<html>
    <body>
        <div id = 'app'></div>
        <script src = "demo.ts"></script>
    </body>
</html>

JS

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'));