Materialize Toasts


Materialize Toasts: Toasts are basically used to provide the unobtrusive alerts to the user. Here in this tutorial we are going to explain how you can create Toasts in Materialize. You can also use our online editor to edit and run the code online.


Materialize Toasts Example

Materialize.toast() function is used to create the toast in Materialize framework. It accepts mainly four parameters- 1. text, 2,. timeout. 3. rounded class, 4. callback. Text is the message that will be displayed in toast and timeout is used to add the time in milliseconds after which the text message will be disappeared. Third parameter is used for rounded toast and fourth parameter is callback. Third and fourth parameters are optional. Here is a very basic example of toast-

Materialize Toasts Example:

 <a class="btn" onclick="Materialize.toast('I am First Toast!', 3000)">First Toast</a>   

Try it »

If you run the above example it will produce the output something like this –

Materialize Toasts Example

Custom HTML

Sometimes we need to add custom HTML in toast content,you can add HTML content in Toast simply as below-

Materialize Add Custom HTML to Toast

 
<script> 
function myToast(){
var $toastContent = $('<div style="background:yellow;color:red;">Toast With Custom Content</div>');
  Materialize.toast($toastContent, 5000);
}
</script>
<a class="btn" onclick="myToast()">Custom Html Toast</a>

Try it »

If you run the above example will generate output something like this-

Materialize Add Custom HTML to Toast

Callback

You can add a callback function when the toast is dissmissed –

Materialize Callback Function in Toast

 
<script> 
function myToast(){
var $toastContent = $('<div style="background:yellow;color:red;">Toast With Callback Function</div>');
  Materialize.toast($toastContent, 5000,"", function(){ alert('Your toast was dismissed')});
}
</script>
<a class="btn" onclick="myToast()">Toast Callback</a> 

Try it »

Alert will be triggered when the Toast is dismissed.


Learn More

Let us create some more examples & demos for the Toasts.


Rounded Toast

To create rounded toast you can simply pass the third parameter as ’rounded’ –

Materialize Rounded Toast

 
<a class="btn" onclick="  Materialize.toast('Rounded Toast Example', 5000, 'rounded');">Rounded Toast</a>

Try it »

If you run the above example it will produce the output something like this –

Materialize Rounded Toast Example


Advertisements

Add Comment

📖 Read More