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.

Required Configuration

Version

  • ZK CE: 8.0.0 or later
  • ZK PE and EE: (Optional)

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.
left center right
top top_left top_center (default) top_right
middle middle_left middle_center middle_right
bottom bottom_left bottom_center bottom_right

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.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply