@doubletrade/lit-dialog

lit-dialog

lit-dialog is a simple dialog web component.

Install

For dev purpose:

git clone [e-mail]:DoubleTrade/lit-dialog.git

For user purpose:

npm install @doubleTrade/lit-dialog

Launch demo

npm run serve

Lint

npm run lint

Simple example

<lit-dialog title="Title" opened .html="This is a message">
</lit-dialog>

<lit-dialog opened .html="">
</lit-dialog>

API

Properties/Attributes

Name	Type	Description
opened	Boolean	Open/close the dialog depending on boolean value
title	String	Title of the dialog
html	Object	Content to display, you can put a String, or a full HTML template
closeOnEsc	Boolean	Close on Pressing ESCAPE key (default to false)
closeOnClickOutside	Boolean	Close on Clicking Outside the dialog (default to false)
closeIcon	Boolean	add a close Icon (default to false)
primaryAction	Boolean	Display a button (default to false)
primaryActionLabel	String	Label of primary action (default to 'Ok')
secondaryAction	Boolean	Display a second button (default to false)
secondaryActionLabel	String	Label of primary action (default to 'Cancel')

Methods

Name	Description
open() => void	Open the dialog
close() => void	Close the dialog

Events

Name	Target	Detail	Description
opened-changed	lit-dialog	{value: Boolean}	Fired when the dialog is opened or closed
primary-action-clicked	lit-dialog		Fired when the primary action is clicked
secondary-action-clicked	lit-dialog		Fired when the secondary action is clicked