Web component for toasts implemented with LitElement.
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>
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);
}
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 |