12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- ---
- title: PopupView
- order: 31
- layout: page
- ---
-
- [[components.popupview]]
- = PopupView
-
- ifdef::web[]
- [.sampler]
- image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/popup-view"]
- endif::web[]
-
- The [classname]#PopupView# component allows opening a pop-up view either by
- clicking on a link or programmatically. The component has two representations: a
- minimized textual representation and the popped-up content. The view can contain
- any components. The view closes automatically when the mouse pointer moves
- outside the view.
-
- In the following, we have a popup view with a text field and a button that opens
- automatically when the user clicks on a "Open the popup" link:
-
-
- [source, java]
- ----
- // Content for the PopupView
- VerticalLayout popupContent = new VerticalLayout();
- popupContent.addComponent(new TextField("Textfield"));
- popupContent.addComponent(new Button("Button"));
-
- // The component itself
- PopupView popup = new PopupView("Pop it up", popupContent);
- layout.addComponent(popup);
- ----
-
- If the textual minimized representation is not given (a null is given), the
- component is invisible in the minimized state. The pop-up can be opened
- programmatically by calling [methodname]#setPopupVisible(true)#. For example:
-
-
- [source, java]
- ----
- // A pop-up view without minimalized representation
- PopupView popup = new PopupView(null, myComponent);
-
- // A component to open the view
- Button button = new Button("Show details", click ->
- popup.setPopupVisible(true));
-
- layout.addComponents(button, popup);
- ----
-
- When the pop-up is opened or closed, a [classname]#PopupVisibilityEvent# is
- fired, which can be handled with a [interfacename]#PopupVisibilityListener#
- added with [methodname]#setPopupVisibilityListener()#.
-
-
- [source, java]
- ----
- // Fill the pop-up content when it's popped up
- popup.addPopupVisibilityListener(event -> {
- if (event.isPopupVisible()) {
- popupContent.removeAllComponents();
- popupContent.addComponent(new Table(null,
- TableExample.generateContent()));
- }});
- ----
-
- [[components.popupview.css]]
- == CSS Style Rules
-
-
- [source, css]
- ----
- .v-popupview {}
- .v-overlay-container {
- .v-popupview-popup {
- .popupContent { }
- }
- }
- ----
-
- In minimalized state, the component has [literal]#++v-popupview++# style. When
- popped up, the pop-up content is shown in a [literal]#++v-popupview-popup++#
- overlay element under the [literal]#++v-overlay-container++#, which is contains
- all floating overlays outside the component hierarchy.
-
-
-
|