Usage

Call mdtoast():

// Initializes and shows default toast or with the 'new' keyword - i.e new mdtoast(...)
mdtoast('This is a toast message.');

Configurations

Below is an example of storing your toast in a variable for future reuse:

// Initializes default toast with duration of 10 seconds (this will not show the toast since init is set to true)
var myToast = mdtoast('This is a toast message.', { duration: 10000, init: true }); 

// Displays the toast
myToast.show();

Types

// Initializes different toasts with duration of 10 seconds
// Info
mdtoast('This is an info toast.', { duration: 10000, type: mdtoast.INFO });      // or type: 'info'
mdtoast.info('This is an info toast.', { duration: 10000 });

// Error
mdtoast('This is an error toast.', { duration: 10000, type: mdtoast.ERROR });    // or type: 'error'
mdtoast.error('This is an error toast.', { duration: 10000 });

// Warning
mdtoast('This is a warning toast.', { duration: 10000, type: mdtoast.WARNING }); // or type: 'warning'
mdtoast.warning('This is a warning toast.', { duration: 10000 });

// Success
mdtoast('This is a success toast.', { duration: 10000, type: mdtoast.SUCCESS }); // or type: 'success'
mdtoast.success('This is a success toast.', { duration: 10000 });

Action

// Initializes a toast with action (this toast will not dismiss unless 'interactionTimeout' is specified)
mdtoast('Message archived.', {
  type: 'success', 
  interaction: true, actionText: 'UNDO', 
  action: function(){
    //TODO: Undo codes here...
    this.hide(); // this is the toast instance
  }
});

Remember

Comment or remove the line shown below in the css file if you already have a link to the Roboto font.

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');