Directory

← Back

QuickPopup component for Vaadin Flow

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

Author

Rating

Popularity

100+

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

First release for 14.+

Released
2019-12-16
Maturity
EXPERIMENTAL
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

QuickPopup component for Vaadin Flow - Vaadin Add-on Directory

QuickPopup is a control similar to the PopupView for Vaadin 8+. QuickPopup component for Vaadin Flow - Vaadin Add-on Directory
# 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.
Source Code

QuickPopup component for Vaadin Flow version 0.8.1

QuickPopup component for Vaadin Flow version 0.8.2
Now use the target component element as a reference.

QuickPopup component for Vaadin Flow version 1.0.0
First release for 14.+

QuickPopup component for Vaadin Flow version 1.0.2
minor build fix

QuickPopup component for Vaadin Flow version 1.0.2.1
remove FINER log

QuickPopup component for Vaadin Flow version 1.0.3
- Fix wrong start position on first shown. - Add support to be themed with CssImport. Ej: `@CssImport(value = "./styles/quick-popup-custom.css",themeFor = "quick-popup")` and in quick-popup-custom.css: ``` .popup { /*z-index: 10000;*/ background: red; } ```

QuickPopup component for Vaadin Flow version 1.0.3.15
rewrite the js files and fix initial position.

Online