Skip to content

Latest commit

 

History

History
66 lines (52 loc) · 1.5 KB

README.md

File metadata and controls

66 lines (52 loc) · 1.5 KB
Raw

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