lit-toast

 !npm

Web component for toasts implemented with LitElement.

Demo

Installation

``shell
npm install lit-toast --save
`

Then, import lit-toast into your element:

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

or in an html file:

`html

`

Usage

In your LitElement class:

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

constructor() {
super();
}

render() {
return html

Show Toast


;
}

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

Styling

`css
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 |