logo polydile dile-components

dile-toast

Web Component to send feedback to the user, inspired on the Material Design "toast" component.

Usage

Installation:

npm install @dile/ui

Import the component:

import '@dile/ui/components/toast/toast';

Use the component:

<dile-toast id="myToast" duration="5000"></dile-toast>

Properties

Methods

let toastElement = document.getElementById('myToast');
toastElement.open('This is a success toast!!', 'success');

Style customization

The background color of the toast depends on the status of the message. You can customize it using the CSS custom properties bellow.

Custom property Description Default
--dile-toast-success-color Success background color #27ae60
--dile-toast-error-color Error background color #e74c3c
--dile-toast-neutral-color Neutral background color #303030
--dile-toast-text-color Text color #fff
--dile-toast-width With of the toast element 280px
--dile-toast-padding Padding for the toasts 10px 15px
--dile-toast-z-index z-index for the toasts 1001
--dile-toast-font-weight Messages font weight normal
--dile-toast-font-size Messages font size 1em
--dile-toast-border-radius Border radius 0

dile-toast demos

Default toast

<script type="module">
import { LitElement, html, css } from 'lit';
import '@dile/ui/components/toast/toast';

class MyComponent extends LitElement {
  static get styles() {
    return css`
      :host {
        position: relative;
        z-index: 1000;
      }
    `
  }
  render() {
    return html`
      <dile-toast id="myToast" duration="5000"></dile-toast>
      <button id="opensuccess">Show success toast</button>
      <button id="openneutral">Show neutral toast</button>
      <button id="openerror">Show error toast</button>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('opensuccess').addEventListener('click', () => {
      this.shadowRoot.getElementById('myToast').open('I am a success toast', 'success');
    });
    this.shadowRoot.getElementById('openneutral').addEventListener('click', () => {
      this.shadowRoot.getElementById('myToast').open('I am a neutral toast', 'neutral');
    });
    this.shadowRoot.getElementById('openerror').addEventListener('click', () => {
      this.shadowRoot.getElementById('myToast').open('I am a error toast', 'error');
    });
  }
}
customElements.define('my-component', MyComponent);
</script>
<my-component></my-component>

Styled toast

<script type="module">
import { LitElement, html, css } from 'lit';

class SecondComponent extends LitElement {
  
  static get styles() {
    return css`
      :host {
        position: relative;
        z-index: 1000;
      }
      dile-toast {
        --dile-toast-success-color: #cfd;
        --dile-toast-neutral-color: #ddd;
        --dile-toast-error-color: #fcd;
        --dile-toast-text-color: #303030;
        --dile-toast-font-weight: bold;
        --dile-toast-font-size: 1.1rem;
        --dile-toast-border-radius: 2rem;
      }
    `
  }

  render() {
    return html`
      <dile-toast id="myToast"></dile-toast>
      <button id="opensuccess">Show success toast</button>
      <button id="openneutral">Show neutral toast</button>
      <button id="openerror">Show error toast</button>
    `
  }
  firstUpdated() {
    this.shadowRoot.getElementById('opensuccess').addEventListener('click', () => {
      this.shadowRoot.getElementById('myToast').open('I am a success toast', 'success');
    });
    this.shadowRoot.getElementById('openneutral').addEventListener('click', () => {
      this.shadowRoot.getElementById('myToast').open('I am a neutral toast', 'neutral');
    });
    this.shadowRoot.getElementById('openerror').addEventListener('click', () => {
      this.shadowRoot.getElementById('myToast').open('I am a error toast', 'error');
    });
  }
}
customElements.define('second-component', SecondComponent);
</script>
<second-component></second-component>