Directory

← Back

QuickPopup component for Vaadin Flow

QuickPopup is a control similar to the PopupView for Vaadin 8+.

Author

Contributors

Rating

quickpopup

A popup control for Vaadin Flow

QuickPopup is a control similar to the PopupView for Vaadin 8+. It show a popup near to the target component when the show method is called.

Use CSS to customize it.

Sample code

QuickPopup qp;

public VaadinFlowLabView() {
        setClassName("app-view");
        setSizeFull();

        Button button = new Button("Click me", event -> {
            hello.setText("Clicked!");
            hello.setClassName("clicked");
            qp.show();
        });
       button.setThemeName("primary");
       button.setId("buttonID");
       add(button);
        
       TextField subtext = new TextField("subtext");
       Button subtn = new Button("subbutton");
       VerticalLayout vlPop = new VerticalLayout();
       vlPop.add(subtext);
       vlPop.add(subtn);
        
       qp = new QuickPopup(button.getElement(), vlPop );
}
/* 
Create a CSS file and import it. 

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

.overlay {
    z-index: 300;
}

/* useful if you need to use the component with Dialog */
/* 
Create a CSS file and import it. 

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

.popup {
    background-color: burlywood;

    border-radius: 5px;
    border-color: #745f46;
    border-style: solid;
    border-width: 5px;
}

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

rewrite the js files and fix initial position.

Released
2020-06-18
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 14+
Polymer 3.0+ in 1.0.2
Vaadin 10+ in 1.0.3
Browser
Firefox
Google Chrome
Online