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 |