ToastComponent

This class combines the configuration and the core styling of a toast.

You can configure the following aspects:

• position of the toast: top | topLeft | topRight | bottom (default) | bottomLeft | bottomRight

• duration: time in ms before the toast is automatically dismissed - default is 5000 ms

• isCloseable : if true, a close button is added for closing the toast before the duration timer hits zero

• closeButtonStyle: style of the toast's close button, if displayed

• background: background color of the toast

• content : actual content of the toast, e.g. some text or an icon.

In order to avoid having to build the toast's content manually, it is recommended to use toasts in combination with alerts. This can be done by providing an AlertComponent as the toast's content.

showToast {
    content {
         alert {
             title("Alert-Toast")
             content("This is a test-alert in a toast.")
         }
    }
    severity { success }
    variant { leftAccent }
}

Example on how to set up a toast manually:

showToast {
    status { warning }
    position { bottomRight }
    duration { 8000 }

    content { ... }
}

Also, there are two static helper functions for the following use cases:

• closeAllToasts -> close all visible toasts

• closeLastToast -> close the last toast

Example:

clickButton {
     variant { outline }
     text("closeAll")
} handledBy ToastComponent.closeAllToasts()