Toasts (aka Flash Messages) are used to inform users of a completed or failed action. Messages can be dismissed by the user, either with the close button or by swiping left/right. Messages can also be set to self dismiss after an arbitrary amount of time.
New messages/errors can be created by calling new zd.Toast({}). The class
constructor accepts an options object.
zd.Toast({
element,
title,
message,
type: 'message',
dismiss: false
})
Use these as follows
| Property | Default | Value |
|---|---|---|
element |
null |
A reference to a pre-existing DOM element (for internal use) |
title |
null |
The title (bold text) of the message |
message |
null |
The message body |
type |
message |
The message type message or error |
dismiss |
false |
For the message to auto-dismiss after 1 second set to 1000 |
To create a self dismissing message that disappears after 2 seconds you would use the following:
new zd.Toast({
title: "Info",
message: "Standard message that dismisses after 2 seconds.",
dismiss: 2000
})
Messages and errors can be rendered server-side by adding the following (example) to the bottom of the page body. JavaScript will then automatically pick up these messages and add event handlers/auto dismiss timers.
<div class="Toasts">
<div class="Toasts-items">
<div class="Toasts-item u-accel" data-type="error" data-dismiss="false"><strong>Error</strong> Your policy was not created, please try again.
<a href="#" div class="Toasts-item-close"><i class="Icons-close"></i></a>
</div>
</div>
</div>