@ppci-mock/custom-notification

Notification

Table of contents

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

Installation

NPM

npm i @ppci-mock/custom-notification

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

Usage

Javascript

import '@ppci-mock/custom-notification'

Browser

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

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

<!-- Component -->
<custom-notification
  title=${String}
  subtitle=${String}
>
  <button slot="buttons">Cancel</button>
  <button slot="buttons">Confirm</button>
</custom-notification>

Styling

custom-notification {
  --danger: /* new color */
  --warning: /* new color */
  --success: /* new color */
}

Properties

Property	Type	Description	Possible Values
*title*	string	Title of the notification
subtitle	string	Subtitle of the notification
Theme
success	boolean	Show as green success notification	```html ```
error	boolean	Show as red error notification	```html ```
warning	boolean	Show as orange warning notification	```html ```