Directory

← Back

BubbleDialog component for Vaadin Flow 13.+

BubbleDialog to attach to an element.

Author

Contributors

Rating

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);
// Add this to the shared style and set the classname in your code.
<dom-module id="bubble-dialog-custom" theme-for="bubble-dialog">
    <template>
        <style>
            .roundBubble {
                border-radius: 5px;
            }
        </style>
    </template>
</dom-module>

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Implemented the options to align:

  • TOP RIGHT
  • BOTTOM RIGHT
  • BOTTOM LEFT
  • TOP LEFT
  • UP LEFT
  • UP RIGHT
Released
2019-09-23
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 13+
Vaadin 10+ in 0.4.3
Browser
Firefox
Google Chrome
Online