Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →

lit-modal

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

lit-modal

Dialog window based on lit-element

latest

npm

Version: 1.2.38

Version published: 5 years ago

Weekly downloads: 11

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

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

Keywords

FAQs

Package last updated on 24 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

lit-modal

LitModal

Install

Properties/Attributes

Styles

Demo

HTML

JS

Keywords

Related posts

Socket Partners with Replit to Block Malicious Packages in AI-Powered Development

npm Tooling Bug Incorrectly Marks One-Character Packages as Security Holders