@ppci-mock/custom-dialog

Dialog

Table of contents

1. Installation
2. Usage
3. Styling
4. Properties
5. Events

Installation

NPM

npm i @ppci-mock/custom-dialog

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci-mock/custom-dialog'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-dialog/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-dialog/builds/legacy.min.js" />

<!-- Component -->
<custom-dialog
  @close=${Function}
  ?loading=${Boolean}
  ?open=${Boolean}
>
  <div>Place dialog content here</div>
</custom-dialog>

Styling

custom-dialog {
  --theme-dialog-backdrop: white;
}

Properties

Property	Type	Description	Possible Values
*open*	boolean	Show or hide dialog	```html ```
loading	boolean	Show or hide loading indicator	```html ```
Slotted
Unnamed slot	string | html	Add dialog content here	```html This is slotted content ```

Events

Name	Description	Payload
@close	Dialog close icon has been clicked	```{ target: ..., currentTarget: ..., ... }```