PopupView

The 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:

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 setPopupVisible(true). For example:

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 PopupVisibilityEvent is fired, which can be handled with a PopupVisibilityListener added with setPopupVisibilityListener().

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

CSS Style Rules

CSS

.v-popupview {}
.v-overlay-container {
  .v-popupview-popup {
    .popupContent { }
  }
}

In minimalized state, the component has v-popupview style. When popped up, the pop-up content is shown in a v-popupview-popup overlay element under the v-overlay-container, which is contains all floating overlays outside the component hierarchy.