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
Compatibility
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 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.