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.
First, create a new CSS file
VAADIN/themes/mytheme/styles.scss
.Then, create a new Vaadin project with the root class
TrayNotificationsUI
that is annotated with@Theme("mytheme")
.@Theme("mytheme") public class TrayNotificationsUI extends UI {…}