Skip to content
Web component for toasts implemented with LitElement.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
CHANGELOG.md
LICENSE
README.md
lit-toast.js
package.json
yarn.lock

README.md

lit-toast

Published on webcomponents.org npm

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>
  `;
}

_showToast() {
  this.shadowRoot.querySelector('lit-toast').show("I'm a toast");
}

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
You can’t perform that action at this time.