lit-toast

Web component for toasts implemented with LitElement.

Demo

Installation

npm install lit-toast --save

Then, import lit-toast into your element:

import 'lit-toast/lit-toast.js';

or in an html file:

<script type="module" src="/path/to/lit-toast.js"></script>

Usage

In your LitElement class:

static get styles() {
  return css`
    :host {
      display: block;
    }
  `;
}
static get properties() {
  return {};
}

constructor() {
  super();
}

render() {
  return html`
    <button @click="${this._showToast}">
      Show Toast
    </button>
    <lit-toast></lit-toast>
  `;
}

/**
 * toast.show(message, [duration])
 * message: String
 * duration: Number in ms
 *
 * return: Promise<void>, resolved when the toast has finished
 */
_showToast() {
  this.shadowRoot.querySelector('lit-toast').show("I'm a toast", 2500);
}

Styling

lit-toast {
  --lt-border: 2px solid red;
}

CSS property	Default value
--lt-background-color	#292929
--lt-border	none
--lt-border-radius	2px
--lt-bottom	40px
--lt-color	#dddddd
--lt-font-family	sans-serif
--lt-font-size	1em
--lt-padding	16px
--lt-z-index	2