Skip to content

Toast web component create animated user feedback messages, based on LitElement

License

Notifications You must be signed in to change notification settings

Polydile/dile-toast

Repository files navigation

Moved

This package has moved and is now available at @dile/dile-toast. Please update your dependencies. This repository is no longer maintained.

dile-toast

This is a Web Component to send feedback to the user, inspired on the Material Design "toast" component, based on LitElement.

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

Let's go to DEMO page!

Properties

  • duration: number of microseconds the toast will be visible on the page.
  • messages: Array of message objects. You will not use usually this property directly to create feedback messages, instead of that is preferable to use the open () method to create the message object in the expected way for the component.

Methods

open(text, status)

To use this component and show feedback messages to the user, simpy call the open() method of the component. There are two arguments accepted:

  • text: The message you wish to send.
  • status: The status of the message: 'success', 'error' or 'neutral'. This is an optional argument, default value is 'neutral'.
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

About

Toast web component create animated user feedback messages, based on LitElement

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •