QuickPopup component for Vaadin Flow

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

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;
}

Links

• Source Code

Compatibility