2

Messages

Hadiyat Avatar Hadiyat Virgiawan You sent an attachment. 16 hours ago
John Low Avatar John Low Wait a sec.. 22 hours ago
Yong Tian Avatar Yong Tian How are you? 12 April
Andree Avatar Andree W Kindly check my work 08 April
Lisa Avatar Lisa Tan Please help me check this. 02 April
1

Notifications

Mark all as read
Today
MC Margo Corn has invited you to the project Untitled 2 min EH Elsa Hoffman removed you 1 hr
Yesterday
MP Nadya Pasutri mentioned you in a comment in the project Untitled 2 "Mike, we need to fix this asap" 14:12 KK Konstantin Konstantinovich removed you from Mobile Dolfin 12:03
25 Mar
NP Nadya Pasutri accepted your invitation the project Untitled 2 09:45 KK Siti accepted the invitation to the project Tablature 08:15
Home / User Interface / Components

Toast

Notify your users by using the toast component and choose from multiple colors, templates, and positions.

Skewind uses ToastifyJS to manage this component. Toastify is a lightweight, vanilla JS toast notification library.

ToastifyJS instance is managed by the Toast component. Whereas the Toast component is not included as a core component. So you have to import it manually when it is actually needed on the page.

But with that being said, you can also add it as a core component at any time through the main.js file.

Usage

Initiate the instance by calling Toast as a function Toast(options) then calling the showToast() method in a chain. Here is an example of how to do it. Try to click the buttons below.

Close Button

To add the close button, just set the close: true option.

Permanent Toast

To show permanent toast, you can set the option to duration: -1.

Toast Destination

You can set the destination URL when the toast gets clicked with the destination: '/' option.

Presets

There are presets that are available for you to use. At the moment, we only provide some of the most useful in real applications.

Success Toast

To show a success toast, you just need to initiate the instance by calling Toast.success(content, options).

Error Toast

To show an error toast, you just need to initiate the instance by calling Toast.error(content, options).

Warning Toast

To show a warning toast, you just need to initiate the instance by calling Toast.warn(content, options).

API

The Toast object is just a proxy of an awesome ToastifyJS. But it comes with some additional functions to use as a preset of the default options.

Functions

The list of available functions.

Function Return Description
Toast(content, options) Toastify Instance Default Toast.
Toast.success(content, options) Toastify Instance Success Toast.
Toast.error(content, options) Toastify Instance Error Toast.
Toast.warning(content, options) Toastify Instance Warning Toast.

Parameters

All the functions above has two parameters.

Parameter Type Description
content String Text or HTML Content.
options Object The options inherit from ToastifyJS.

Options

Since it inherits from ToastifyJS, you can see the available options from their documentation.

Methods

Each ToastifyJS instance has these public methods.

Methods Description
showToast() Show the toast.
hideToast() Hide the toast.