Materialize 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 Materialize CSS toast.
To add Materialize CSS toast inside the application, simply call M.toast()
function through the onclick
event inside the button or hyperlink element.
<a onclick="M.toast({html: 'Write your toast message'})" class="btn">Click To see Toast!</a>
<a onclick="M.toast({html: 'I am a toast'})" class="btn">Toast!</a>
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.
<a onclick="M.toast({html: 'I am a toast!', classes: 'rounded'})" class="btn">Rounded Toast!</a>
You can pass HTML String as the first argument inside the toast function.
<a class="waves-effect waves-light btn" onclick="displayCustomHTMLToast()">Toast with Action</a>
You can also use callback function inside the toast.This callback function will be fired after the completion of the toast function.
<a class="btn" onclick="M.toast({html: 'I am a toast', completeCallback: function(){alert('Your toast was dismissed')}})">Toast!</a>