Installation

Usage

The script's function won't be immediately available, but it will call a hook through mw.hook. To ensure it's available you can use:

mw.hook('dev.toasts').add(function(Toasts) {
	/**
	 * The `Toasts` parameter is the same as `window.dev.toasts`
	 * Run your code here
	 */
});

Each toast has its own color and the non-default toasts have their own icons, which can be displayed using their own methods:

show

Type: Method

Description: Displays a toast.

Parameters:

• content - Notification content.
• options - An options object for tailoring the notification.

• type - Possible values include: default, info, warning, error, and success.
• icon - What type of icon to use, possible values include: info, warning, error, and success.
• timeout - How long to display the notification for in milliseconds. Defaults to 3000ms.

info

Type: Method

Description: Displays a toast using the info type.

Parameters:

• content - Notification content.
• options - An options object for tailoring the notification.

• icon - What type of icon to use, possible values include: info, warning, error, and success.
• timeout - How long to display the notification for in milliseconds. Defaults to 3000ms.

error

Type: Method

Description: Displays a toast using the error type.

Parameters:

• content - Notification content.
• options - An options object for tailoring the notification.

• icon - What type of icon to use, possible values include: info, warning, error, and success.
• timeout - How long to display the notification for in milliseconds. Defaults to 3000ms.

warning

Type: Method

Description: Displays a toast using the warning type.

Parameters:

• content - Notification content.
• options - An options object for tailoring the notification.

• icon - What type of icon to use, possible values include: info, warning, error, and success.
• timeout - How long to display the notification for in milliseconds. Defaults to 3000ms.

success

Type: Method

Description: Displays a toast using the success type.

Parameters:

• content - Notification content.
• options - An options object for tailoring the notification.

• icon - What type of icon to use, possible values include: info, warning, error, and success.
• timeout - How long to display the notification for in milliseconds. Defaults to 3000ms.

Examples

Creates a standard toast and displays it for 5 seconds:

// default toasts
Toasts.show('Hello world.', { timeout: 5000 });
Toasts('Hello again, world.', { timeout: 5000 });

Creates various types of toasts:

// info toast with the warning icon, display for 10 seconds
Toasts.info('3.1415926...', { icon: 'warning', timeout: 10000 });

// error toast with no icon
Toasts.error('Oh no, something went wrong!', { icon: 'default' });

// success toast
Toasts.success('Congratulations, you did it!');