Lit-modal NPM | npm.io

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

dialog modal lit-element LitElement

kailib

@infinitebrahmanuniverse/nolb-lit-@everything-registry/sub-chunk-2083 @zalastax/nolb-lit-

3 years ago

3 years ago

3 years ago

3 years ago