Toasts

Toasts are small notification appearing from the bottom. According to the Material Design Guidelines they have no icon and at least a small message. Optional you can place one action button.

In nativeDroid² you can trigger Toasts in two different ways.

Programmatically

new $.nd2Toast({ // The 'new' keyword is important, otherwise you would overwrite the current toast instance
   message : "Sample Message", // Required
   action : { // Optional (Defines the action button on the right)
     title : "Pick phone", // Title of the action button
     link : "/any/link.html", // optional (either link or fn or both must be set to define an action)
     fn : function() { // function that will be triggered when action clicked
        console.log("Action Button clicked'");
     },
     color : "red" // optional color of the button (default: 'lime')
   },
   ttl : 8000 // optional, time-to-live in ms (default: 3000)
 });

By Data Attributes

<a href="#"
   data-role="toast"
   data-toast-message="Simple toast message set by data-message"
   data-toast-action-title="Action"
   data-toast-action-link="toasts.html"
   data-toast-action-color="red"
   data-toast-ttl="6000">Link</a>

Demonstration

Open Toast by data attributes Sample Toast with Text Message only