Introduction

We’d like to introduce an experimental feature – Toast. It is a simple feedback about an operation. Though ZK has a similar Notification since ZK 6.0.1, there are some differences between them.

In contrast with Notification, Toast can:

• Be positioned relative to the viewport even if the page is scrolled.
• Be stackable. Indicating that the later toasts will not overlay the previous ones.

But Toast can’t:

• Use a mouse cursor (at_pointer or after_pointer) or a component as a position reference.
• Use a custom position (x, y).

You can use Toast if you just want to show a message in application. However, it is recommended to keep using Notification if you want the message to stick to a specific component.

Demo

The demo below demonstrates the basic usage of a Toast.

[yt4wp-video video_id=”SxDcHOjGKsQ”]

Required Configuration

Version

• ZK 8.0.0 or later

Example

// a simple toast
Toast.show("Hello World");

// an error toast positioned at bottom-right of browser window
Toast.show(
  "Operation aborted!", "error", "bottom_right", 5000, false
);

Java API

We provide several methods to invoke a Toast:

1. void show(String msg):
   a five-second toast notification message at the top-center of the browser window.
2. void show(String msg, String type, String position):
   a five-second toast notification message.
3. void show(String msg, String type, String position, int duration, boolean closable):
   a toast notification message.

Parameters:

• HTML can be used in a message, so escape the string if necessary.
• The type can be “info” (default), “warning” or “error”.
• The default duration is 5000ms.
• The closable attribute can toggle if the close button should be visible. (default false)
• Only nine positions can be used. Please check the table below for more details.

This component is currently in beta. If you are interested in using this component please contact us at info@zkoss.org.

Downloads

The whole demo project can be found on the GitHub project.