Component – Toast

Notification message.Download + DemoView DemoDownload ComponentHow To
The Toast component can be used to show a notification message.
There are six .toast–{position} classes you can use to place the notification in different positions:

toast–top-rig…


This content originally appeared on CodyHouse and was authored by CodyHouse

Notification message.Toast

Download + Demo

How To

The Toast component can be used to show a notification message.

There are six .toast--{position} classes you can use to place the notification in different positions:

  • toast--top-right
  • toast--top-left
  • toast--top-center
  • toast--bottom-right
  • toast--bottom-left
  • toast--bottom-center

Use the openToast custom event to show a toast element:

var toast = document.querySelector('.js-toast'), // toast element
  openToastEvent = new CustomEvent('openToast'); // custom event

// open toast
toast.dispatchEvent(openToastEvent);

Duration #

The toast element automatically hides after 5s. You can change this amount using the data-toast-interval attribute:

<!-- hide toast after 3s -->
<div data-toast-interval="3000" class="toast toast--hidden toast--top-right js-toast" role="alert" aria-live="assertive" aria-atomic="true">
  <!-- toast content here -->
</div>

Set data-toast-interval="0" if you do not want to automatically close the notification.

Dynamic Content #

If your toast elements are dynamically created, you will need to initialize them after they have been injected in the DOM.

Create a new Toasts object:

var ToastObj = new Toasts();

Then initialize a new toast after it has been included in the DOM:

ToastObj.initToast(toast); // toast is the .toast element

Then open it using the openToast event:

// open toast
toast.dispatchEvent(new CustomEvent('openToast'));


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2021-09-22T10:36:48+00:00) Component – Toast. Retrieved from https://www.scien.cx/2021/09/22/component-toast/

MLA
" » Component – Toast." CodyHouse | Sciencx - Wednesday September 22, 2021, https://www.scien.cx/2021/09/22/component-toast/
HARVARD
CodyHouse | Sciencx Wednesday September 22, 2021 » Component – Toast., viewed ,<https://www.scien.cx/2021/09/22/component-toast/>
VANCOUVER
CodyHouse | Sciencx - » Component – Toast. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/22/component-toast/
CHICAGO
" » Component – Toast." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2021/09/22/component-toast/
IEEE
" » Component – Toast." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2021/09/22/component-toast/. [Accessed: ]
rf:citation
» Component – Toast | CodyHouse | Sciencx | https://www.scien.cx/2021/09/22/component-toast/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts