BubbleDialog component for Vaadin Flow 14.+

BubbleDialog to attach to an element.

View larger

Close

BubbleDialog

This component let you attach a bubble to an element and show it when you need.

Sample code

Label lbl = new Label("Input your name:");
add(lbl);
TextField txt = new TextField();
add(txt);
txt.addInputListener((event) -> {
            //  add your bussines logic here
            // ...
            bd.show();
        });
        
VerticalLayout vl = new VerticalLayout();
vl.add(new Label("We found more data!"));
vl.add(new Label("Do you want to see it?"));
Button btnShow = new Button("Show It!");
btnShow.setThemeName("contained primary");
vl.add(btnShow);
bd = new BubbleDialog(txt.getElement(), vl);

/* 
Create a CSS file and import it. 

In your main view use 
@CssImport(value = "./styles/bubble-custom.css",themeFor = "bubble-dialog")
*/

.bubble {
    background-color: blue !important;
    border: 3px solid !important;
}

Links

• View on GitHub

Compatibility