Materialize CSS Toast
Materialize CSS toast is basically a small alert box that appears for a couple of seconds whenever the user clicks on any link, button, etc.
Steps to create a Materialize toasts.
To add a toast inside the application, simply call M.toast() function through the onclick event inside the button or hyperlink element.
General Syntax
<a onclick="M.toast({html: 'Write your toast message'})" class="btn">Click To see Toast!</a>
Source Code
<a onclick="M.toast({html: 'I am a toast'})" class="btn">Toast!</a>
Toast Styling
You can style the toast either using user specific CSS styles or a predefined CSS class. You have to pass predefined CSS class such as .rounded or user specific CSS class to the toast function.
Source Code
<a onclick="M.toast({html: 'I am a toast!', classes: 'rounded'})" class="btn">Rounded Toast!</a>
Toast With Custom HTML
You can pass HTML string as the first argument inside the toast function.
Source Code
<a class="waves-effect waves-light btn" onclick="displayCustomHTMLToast()">Toast with Action</a>
Toast: Callback Function
You can also use callback function inside the toast.This callback function will be fired after the completion of the toast function.
Source Code
<a class="btn" onclick="M.toast({html: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast With Callback</a>
Web Tutorials
