toasts
Push notification messages to your visitors with a toast. Toasts are an easy and effective way to tell your visitors a short and consice often positive message from your WebApp.
A Toast message should not be used to inform your users that an error has occured.
The Toast markup is based on the Envision component Toast.
Below is a example of how to use the Toast util.
import toasts from '@sitevision/api/client/toasts';
Methods
Toasts.publish(options)
Performs a publish-request.
Supported options
Property | Descripion | Type | Default |
---|---|---|---|
heading | Heading parameter (can be empty). | string | |
message | Message parameter. | string | "" |
ttl | Time to live, how long the toast will be shown, (in seconds). | number | 4 |
callback | Callback function executed when toast message is removed. | function | |
type | Type of Toast. Available types are:
| string | "" |
checkmark | If the toast should display a check mark icon. | boolean | false |
Examples
import toasts from '@sitevision/api/client/toasts';
const publishToast1 = () => {
toasts.publish({
heading: 'Heading',
message: 'Toast message',
type: 'success',
ttl: 3,
checkmark: true,
callback: () => {
console.log('Executed when Toast is closed.');
},
});
};
const publishToast2 = () => {
toasts.publish({
heading: 'Heading',
message: 'Toast message',
type: 'primary',
});
};
const publishToast3 = () => {
toasts.publish({
message: 'Toast message',
});
};
const publishToast4 = () => {
toasts.publish({
checkmark: true,
heading: 'A longer toast message',
message:
'Hello, World! This is a Toast message. This Toast has several lines of toasty content!',
});
};