Package com.vaadin.flow.component.dialog

Class Dialog

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.dialog.Dialog
All Implemented Interfaces:
AttachNotifier, DetachNotifier, HasComponents, HasElement, HasEnabled, HasSize, HasStyle, HasTheme, HasThemeVariant<DialogVariant>, Serializable
@Tag("vaadin-dialog") @NpmPackage(value="@vaadin/polymer-legacy-adapter",version="24.7.12") @NpmPackage(value="@vaadin/dialog",version="24.7.12") @JsModule("@vaadin/polymer-legacy-adapter/style-modules.js") @JsModule("@vaadin/dialog/src/vaadin-dialog.js") @JsModule("./flow-component-renderer.js") public class Dialog extends Component implements HasComponents, HasSize, HasStyle, HasThemeVariant<DialogVariant>
A Dialog is a small window that can be used to present information and user interface elements in an overlay.

Dialogs can be made modal or non-modal. A modal Dialog blocks the user from interacting with the rest of the user interface while the Dialog is open, as opposed to a non-modal Dialog, which does not block interaction.

Dialogs can be made draggable and resizable. When draggable, the user is able to move them around using a pointing device. It is recommended to make non-modal Dialogs draggable so that the user can interact with content that might otherwise be obscured by the Dialog. A resizable Dialog allows the user to resize the Dialog by dragging from the edges of the Dialog with a pointing device. Dialogs are not resizable by default.

Dialogs automatically become scrollable when their content overflows. Custom scrollable areas can be created using the Scroller component.

Best Practices:
Dialogs are disruptive by nature and should be used sparingly. Do not use them to communicate nonessential information, such as success messages like “Logged in”, “Copied”, and so on. Instead, use Notifications when appropriate.

Author:
Vaadin Ltd
See Also:

  • Constructor Details

    • Dialog

      public Dialog()
      Creates an empty dialog.

    • Dialog

      public Dialog(Component... components)
      Creates a dialog with given components inside.
      Parameters:
      components - the components inside the dialog
      See Also:

    • Dialog

      public Dialog(String title)
      Creates a dialog with given title.
      Parameters:
      title - the title of the component

    • Dialog

      public Dialog(String title, Component... components)
      Creates a dialog with given title and components inside.
      Parameters:
      title - the title of the component
      components - the components inside the dialog

  • Method Details

    • getTop

      public String getTop()
      Gets the top position of the overlay.
      Returns:
      the top position of the overlay

    • setTop

      public void setTop(String top)
      Sets the top position of the overlay. If a unitless number is provided, pixels are assumed.

      Note that the overlay top edge may not be the same as the viewport top edge (e.g. the "Lumo" theme defines some spacing to prevent the overlay from stretching all the way to the top of the viewport).

      Parameters:
      top - the top position of the overlay

    • getLeft

      public String getLeft()
      Gets the left position of the overlay.
      Returns:
      the left position of the overlay

    • setLeft

      public void setLeft(String left)
      Sets the distance of the overlay from the left of its container. If a unitless number is provided, pixels are assumed.

      Note that the overlay left edge may not be the same as the viewport left edge (e.g. the "Lumo" theme defines some spacing to prevent the overlay from stretching all the way to the left of the viewport).

      Parameters:
      left - the left position of the overlay

    • setWidth

      public void setWidth(String value)
      Description copied from interface: HasSize
      Sets the width of the component.

      The width should be in a format understood by the browser, e.g. "100px" or "2.5em".

      If the provided width value is null then width is removed.

      Specified by:
      setWidth in interface HasSize
      Parameters:
      value - the width to set, may be null

    • setMinWidth

      public void setMinWidth(String value)
      Description copied from interface: HasSize
      Sets the min-width of the component.

      The width should be in a format understood by the browser, e.g. "100px" or "2.5em".

      If the provided minWidth value is null then min-width is removed.

      Specified by:
      setMinWidth in interface HasSize
      Parameters:
      value - the min-width value (if null, the property will be removed)

    • setMaxWidth

      public void setMaxWidth(String value)
      Description copied from interface: HasSize
      Sets the max-width of the component.

      The width should be in a format understood by the browser, e.g. "100px" or "2.5em".

      If the provided maxWidth value is null then max-width is removed.

      Specified by:
      setMaxWidth in interface HasSize
      Parameters:
      value - the max-width value (if null, the property will be removed)

    • setHeight

      public void setHeight(String value)
      Description copied from interface: HasSize
      Sets the height of the component.

      The height should be in a format understood by the browser, e.g. "100px" or "2.5em".

      If the provided height value is null then height is removed.

      Specified by:
      setHeight in interface HasSize
      Parameters:
      value - the height to set, may be null

    • setMinHeight

      public void setMinHeight(String value)
      Description copied from interface: HasSize
      Sets the min-height of the component.

      The height should be in a format understood by the browser, e.g. "100px" or "2.5em".

      If the provided minHeight value is null then min-height is removed.

      Specified by:
      setMinHeight in interface HasSize
      Parameters:
      value - the min-height value (if null, the property will be removed)

    • setMaxHeight

      public void setMaxHeight(String value)
      Description copied from interface: HasSize
      Sets the max-height of the component.

      The height should be in a format understood by the browser, e.g. "100px" or "2.5em".

      If the provided maxHeight value is null then max-height is removed.

      Specified by:
      setMaxHeight in interface HasSize
      Parameters:
      value - the max-height value (if null, the property will be removed)

    • getWidth

      public String getWidth()
      Description copied from interface: HasSize
      Gets the width defined for the component.

      Note that this does not return the actual size of the component but the width which has been set using HasSize.setWidth(String).

      Specified by:
      getWidth in interface HasSize
      Returns:
      the width which has been set for the component

    • getMinWidth

      public String getMinWidth()
      Description copied from interface: HasSize
      Gets the min-width defined for the component.

      Note that this does not return the actual size of the component but the min-width which has been set using HasSize.setMinWidth(String).

      Specified by:
      getMinWidth in interface HasSize
      Returns:
      the min-width which has been set for the component

    • getMaxWidth

      public String getMaxWidth()
      Description copied from interface: HasSize
      Gets the max-width defined for the component.

      Note that this does not return the actual size of the component but the max-width which has been set using HasSize.setMaxWidth(String).

      Specified by:
      getMaxWidth in interface HasSize
      Returns:
      the max-width which has been set for the component

    • getHeight

      public String getHeight()
      Description copied from interface: HasSize
      Gets the height defined for the component.

      Note that this does not return the actual size of the component but the height which has been set using HasSize.setHeight(String).

      Specified by:
      getHeight in interface HasSize
      Returns:
      the height which has been set for the component

    • getMinHeight

      public String getMinHeight()
      Description copied from interface: HasSize
      Gets the min-height defined for the component.

      Note that this does not return the actual size of the component but the min-height which has been set using HasSize.setMinHeight(String).

      Specified by:
      getMinHeight in interface HasSize
      Returns:
      the min-height which has been set for the component

    • getMaxHeight

      public String getMaxHeight()
      Description copied from interface: HasSize
      Gets the max-height defined for the component.

      Note that this does not return the actual size of the component but the max-height which has been set using HasSize.setMaxHeight(String).

      Specified by:
      getMaxHeight in interface HasSize
      Returns:
      the max-height which has been set for the component

    • addDialogCloseActionListener

      public Registration addDialogCloseActionListener(ComponentEventListener<Dialog.DialogCloseActionEvent> listener)
      Add a listener that controls whether the dialog should be closed or not.

      The listener is informed when the user wants to close the dialog by clicking outside the dialog, or by pressing escape. Then you can decide whether to close or to keep opened the dialog. It means that dialog won't be closed automatically unless you call close() method explicitly in the listener implementation.

      NOTE: adding this listener changes behavior of the dialog. Dialog is closed automatically in case there are no any close listeners. And the close() method should be called explicitly to close the dialog in case there are close listeners.

      Parameters:
      listener - the listener to add
      Returns:
      registration for removal of listener
      See Also:

    • addResizeListener

      public Registration addResizeListener(ComponentEventListener<Dialog.DialogResizeEvent> listener)
      Adds a listener that is called after user finishes resizing the overlay. It is called only if resizing is enabled (see setResizable(boolean)).

      Note: By default, the component will sync the width/height and top/left values after every resizing.

      Parameters:
      listener - the listener to add
      Returns:
      registration for removal of listener

    • addDraggedListener

      public Registration addDraggedListener(ComponentEventListener<Dialog.DialogDraggedEvent> listener)
      Adds a listener that is called after user finishes dragging the overlay. It is called only if dragging is enabled (see setDraggable(boolean)).

      Note: By default, the component will sync the top/left values after every dragging.

      Parameters:
      listener - the listener to add
      Returns:
      registration for removal of listener

    • add

      public void add(Collection<Component> components)
      Adds the given components into this dialog.

      The elements in the DOM will not be children of the <vaadin-dialog> element, but will be inserted into an overlay that is attached into the <body>.

      Specified by:
      add in interface HasComponents
      Parameters:
      components - the components to add

    • addComponentAtIndex

      public void addComponentAtIndex(int index, Component component)
      Adds the given component into this dialog at the given index.

      The element in the DOM will not be child of the <vaadin-dialog> element, but will be inserted into an overlay that is attached into the <body>.

      Specified by:
      addComponentAtIndex in interface HasComponents
      Parameters:
      index - the index, where the component will be added.
      component - the component to add

    • isCloseOnEsc

      public boolean isCloseOnEsc()
      Gets whether this dialog can be closed by hitting the esc-key or not.

      By default, the dialog is closable with esc.

      Returns:
      true if this dialog can be closed with the esc-key, false otherwise

    • setCloseOnEsc

      public void setCloseOnEsc(boolean closeOnEsc)
      Sets whether this dialog can be closed by hitting the esc-key or not.

      By default, the dialog is closable with esc.

      Parameters:
      closeOnEsc - true to enable closing this dialog with the esc-key, false to disable it

    • isCloseOnOutsideClick

      public boolean isCloseOnOutsideClick()
      Gets whether this dialog can be closed by clicking outside of it or not.

      By default, the dialog is closable with an outside click.

      Returns:
      true if this dialog can be closed by an outside click, false otherwise

    • setCloseOnOutsideClick

      public void setCloseOnOutsideClick(boolean closeOnOutsideClick)
      Sets whether this dialog can be closed by clicking outside of it or not.

      By default, the dialog is closable with an outside click.

      Parameters:
      closeOnOutsideClick - true to enable closing this dialog with an outside click, false to disable it

    • open

      public void open()
      Opens the dialog.

      If a dialog was not added manually to a parent component, it will be automatically added to the UI when opened, and automatically removed from the UI when closed. Note that the dialog is then scoped to the UI, and not the current view. As such, when navigating away from a view, the dialog will still be opened or stay open. In order to close the dialog when navigating away from a view, it should either be explicitly added as a child to the view, or it should be explicitly closed when leaving the view.

    • close

      public void close()
      Closes the dialog.

      This automatically removes the dialog from the UI, unless it was manually added to a parent component.

    • setModal

      public void setModal(boolean modal)
      Sets whether component will open modal or modeless dialog.

      Note: When dialog is set to be modeless, then it's up to you to provide means for it to be closed (eg. a button that calls close()). The reason being that a modeless dialog allows user to interact with the interface under it and won't be closed by clicking outside or the ESC key.

      Parameters:
      modal - false to enable dialog to open as modeless modal, true otherwise.

    • isModal

      public boolean isModal()
      Gets whether component is set as modal or modeless dialog.
      Returns:
      true if modal dialog (default), false otherwise.

    • setDraggable

      public void setDraggable(boolean draggable)
      Sets whether dialog is enabled to be dragged by the user or not.

      To allow an element inside the dialog to be dragged by the user (for instance, a header inside the dialog), a class "draggable" can be added to it (see HasStyle.addClassName(String)).

      Note: If draggable is enabled and dialog is opened without first being explicitly attached to a parent, then it won't restore its last position in the case the user closes and opens it again. Reason being that a self attached dialog is removed from the DOM when it's closed and position is not synched.

      Parameters:
      draggable - true to enable dragging of the dialog, false otherwise

    • isDraggable

      public boolean isDraggable()
      Gets whether dialog is enabled to be dragged or not.
      Returns:
      true if dragging is enabled, false otherwise (default).

    • setResizable

      public void setResizable(boolean resizable)
      Sets whether dialog can be resized by user or not.
      Parameters:
      resizable - true to enabled resizing of the dialog, false otherwise.

    • isResizable

      public boolean isResizable()
      Gets whether dialog is enabled to be resized or not.
      Returns:
      true if resizing is enabled, falsoe otherwiser (default).

    • setHeaderTitle

      public void setHeaderTitle(String title)
      Sets the title to be rendered on the dialog header.
      Parameters:
      title - title to be rendered

    • getHeaderTitle

      public String getHeaderTitle()
      Gets the title set for the dialog header.
      Returns:
      the title or an empty string, if a header title is not defined.

    • getHeader

      public Dialog.DialogHeader getHeader()
      Gets the object from which components can be added or removed from the dialog header area. The header is displayed only if there's a getHeaderTitle() or at least one component added with HasComponents.add(Component...).
      Returns:
      the header object

    • getFooter

      public Dialog.DialogFooter getFooter()
      Gets the object from which components can be added or removed from the dialog footer area. The footer is displayed only if there's at least one component added with HasComponents.add(Component...).
      Returns:
      the header object

    • setVisible

      public void setVisible(boolean visible)
      Set the visibility of the dialog.

      For a modal dialog the server-side modality will be removed when dialog is not visible so that interactions can be made in the application.

      Overrides:
      setVisible in class Component
      Parameters:
      visible - dialog visibility
      See Also:

    • setOpened

      public void setOpened(boolean opened)
      Opens or closes the dialog.

      If a dialog was not added manually to a parent component, it will be automatically added to the UI when opened, and automatically removed from the UI when closed. Note that the dialog is then scoped to the UI, and not the current view. As such, when navigating away from a view, the dialog will still be opened or stay open. In order to close the dialog when navigating away from a view, it should either be explicitly added as a child to the view, or it should be explicitly closed when leaving the view.

      Parameters:
      opened - true to open the dialog, false to close it

    • isOpened

      @Synchronize(property="opened", value="opened-changed", allowInert=true) public boolean isOpened()
      Gets the open state from the dialog.
      Returns:
      the opened property from the dialog

    • addOpenedChangeListener

      public Registration addOpenedChangeListener(ComponentEventListener<Dialog.OpenedChangeEvent> listener)
      Add a lister for event fired by the opened-changed events.
      Parameters:
      listener - the listener to add
      Returns:
      a Registration for removing the event listener

    • addAttachListener

      public Registration addAttachListener(ComponentEventListener<AttachEvent> listener)
      Adds a attach listener to this component.

      Note: To listen for opening the dialog, you should use addOpenedChangeListener(ComponentEventListener).

      Specified by:
      addAttachListener in interface AttachNotifier
      Parameters:
      listener - the listener to add, not null
      Returns:
      a handle that can be used for removing the listener

    • addDetachListener

      public Registration addDetachListener(ComponentEventListener<DetachEvent> listener)
      Adds a detach listener to this component.

      Note: To listen for closing the dialog, you should use addOpenedChangeListener(ComponentEventListener), as the component is not necessarily removed from the DOM when closing.

      Specified by:
      addDetachListener in interface DetachNotifier
      Parameters:
      listener - the listener to add, not null
      Returns:
      a handle that can be used for removing the listener

    • onAttach

      protected void onAttach(AttachEvent attachEvent)
      Description copied from class: Component
      Called when the component is attached to a UI.

      This method is invoked before the AttachEvent is fired for the component.

      Make sure to call super.onAttach when overriding this method.
      Overrides:
      onAttach in class Component
      Parameters:
      attachEvent - the attach event

    • setOverlayRole

      public void setOverlayRole(String role)
      Sets the ARIA role for the overlay element, used by screen readers.
      Parameters:
      role - the role to set

    • getOverlayRole

      public String getOverlayRole()
      Gets the ARIA role for the overlay element, used by screen readers. Defaults to dialog.
      Returns:
      the role

    • getAriaLabel

      protected String getAriaLabel()
      Set the aria-label attribute for assistive technologies like screen readers. An undefined value for this property (the default) means that the aria-label attribute is not present at all.

      This property is not synchronized automatically from the client side, so the returned value may not be the same as in client side.

      Returns:
      the ariaLabel property from the webcomponent

    • setAriaLabel

      protected void setAriaLabel(String ariaLabel)
      Set the aria-label attribute for assistive technologies like screen readers. An undefined value for this property (the default) means that the aria-label attribute is not present at all.
      Parameters:
      ariaLabel - the String value to set

    • setClassName

      public void setClassName(String className)
      Sets the CSS class names of the dialog overlay element. This method overwrites any previous set class names.
      Specified by:
      setClassName in interface HasStyle
      Parameters:
      className - a space-separated string of class names to set, or null to remove all class names

    • getClassNames

      public ClassList getClassNames()
      Description copied from interface: HasStyle
      Gets the set of CSS class names used for this element. The returned set can be modified to add or remove class names. The contents of the set is also reflected in the value of the class attribute.

      Despite the name implying a list being returned, the return type is actually a Set since the in-browser return value behaves like a Set in Java.

      Specified by:
      getClassNames in interface HasStyle
      Returns:
      a list of class names, never null
      See Also:

    • getStyle

      public Style getStyle()
      Description copied from interface: HasStyle
      Gets the style instance for managing inline styles for the element of this component.
      Specified by:
      getStyle in interface HasStyle
      Returns:
      the style object for the element, not null
      Throws:
      UnsupportedOperationException - Dialog does not support adding styles to overlay