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/dialog", version="25.0.0-beta4") @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.

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 are modal by default using ModalityMode.VISUAL.

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 dialog.
      Returns:
      the top position of the dialog

    • setTop

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

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

      Parameters:
      top - the top position of the dialog

    • getLeft

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

    • setLeft

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

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

      Parameters:
      left - the left position of the dialog

    • 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 the user finishes resizing the dialog. 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 the user finishes dragging the dialog. 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.
      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.
      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

      @Deprecated(since="25.0", forRemoval=true) public void setModal(boolean modal)
      Deprecated, for removal: This API element is subject to removal in a future version.
      use setModality(ModalityMode) instead
      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 (e.g. 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

      @Deprecated(since="25.0", forRemoval=true) public boolean isModal()
      Deprecated, for removal: This API element is subject to removal in a future version.
      use getModality() instead
      Gets whether component is set as modal or modeless dialog.
      Returns:
      true if modal dialog (default), false otherwise.

    • setModality

      public void setModality(ModalityMode mode)
      Sets the modality of the dialog. The following modes are available:
      • ModalityMode.STRICT: The dialog shows a modality curtain and users can not interact with components outside the dialog. Client-side events and RPC calls from components outside the dialog are blocked.
      • ModalityMode.VISUAL: The dialog shows a modality curtain and users can not interact with components outside the dialog. However, client-side events and RPC calls from components outside the dialog are allowed.
      • ModalityMode.MODELESS: The dialog does not show a modality curtain and users can interact with components outside the dialog. Client-side events and RPC calls from components outside the dialog are allowed.

      Note: When dialog is set to be ModalityMode.MODELESS, then it's up to you to provide means for it to be closed (e.g. 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:
      mode - the modality mode, not null

    • getModality

      public ModalityMode getModality()
      Gets the modality of the dialog. ModalityMode.VISUAL by default.
      Returns:
      the modality mode, not null

    • 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 listener for when the dialog's opened state changes.

      Note that this event fires immediately when the opened property changes, which, when closing the dialog, is before the closing animation has finished. To wait for the animation to finish, use addClosedListener(ComponentEventListener).

      Parameters:
      listener - the listener to add
      Returns:
      a Registration for removing the event listener

    • addClosedListener

      public Registration addClosedListener(ComponentEventListener<Dialog.ClosedEvent> listener)
      Add a lister for when the dialog's closing animation has finished. Can be used to remove the dialog from the UI afterward.
      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 addClosedListener(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

    • setRole

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

    • setOverlayRole

      @Deprecated(since="25.0", forRemoval=true) public void setOverlayRole(String role)
      Deprecated, for removal: This API element is subject to removal in a future version.
      Use setRole(String) instead
      Sets the ARIA role for the dialog element, used by screen readers.
      Parameters:
      role - the role to set

    • getRole

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

    • getOverlayRole

      @Deprecated(since="25.0", forRemoval=true) public String getOverlayRole()
      Deprecated, for removal: This API element is subject to removal in a future version.
      Use getRole() instead
      Gets the ARIA role for the dialog 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

    • 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