Customizing tray notifications

In this recipe, we will see how to make a tray notification with a custom design. When the user clicks on the Click me! button, the tray notification is shown in the top-right corner (instead of the default bottom-right corner).

Normally, the user has to click on the tray notification window in order to close it. We will change the default behavior, so the tray notification disappears immediately after the user moves with the cursor.

We also change the color of the tray notification from dark gray to light gray.

Getting ready

1. First, create a new CSS file VAADIN/themes/mytheme/styles.scss.

2. Then, create a new Vaadin project with the root class TrayNotificationsUI that is annotated with @Theme("mytheme").

   @Theme("mytheme")
   public class TrayNotificationsUI extends UI {…}

How to do it...

Carry out the following steps:

1. We implement a simple click listener that handles button clicks. Then, we change the default behavior, so we set the delay to 0 ms, the position to top-right...