Package com.vaadin.flow.component.masterdetaillayout

Class MasterDetailLayout

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.masterdetaillayout.MasterDetailLayout
All Implemented Interfaces:
com.vaadin.flow.component.AttachNotifier, com.vaadin.flow.component.DetachNotifier, com.vaadin.flow.component.HasElement, com.vaadin.flow.component.HasSize, com.vaadin.flow.component.HasStyle, com.vaadin.flow.router.RouterLayout, Serializable
@Tag("vaadin-master-detail-layout") @NpmPackage(value="@vaadin/master-detail-layout", version="25.2.0-alpha10") @JsModule("@vaadin/master-detail-layout/src/vaadin-master-detail-layout.js") public class MasterDetailLayout extends com.vaadin.flow.component.Component implements com.vaadin.flow.component.HasSize, com.vaadin.flow.router.RouterLayout
MasterDetailLayout is a component for building UIs with a master (or primary) area and a detail (or secondary) area that is displayed next to, or overlaid on top of, the master area, depending on configuration and viewport size.
Author:
Vaadin Ltd
See Also:

  • Nested Class Summary

    Nested Classes
    Modifier and Type
    Class
    Description
    static class 
    MasterDetailLayout.BackdropClickEvent
    Event that is fired when the backdrop of the details overlay is clicked.
    static class 
    MasterDetailLayout.DetailEscapePressEvent
    Event that is fired when the Escape key is pressed within the details area.
    static enum 
    MasterDetailLayout.Orientation
    Supported orientation values for MasterDetailLayout.
    static enum 
    MasterDetailLayout.OverlayContainment
    Supported overlay containment values for MasterDetailLayout.

  • Field Summary

    Fields
    Modifier and Type
    Field
    Description
    static final String
    DETAIL_PLACEHOLDER_SLOT
     
    static final String
    MASTER_SLOT
     

  • Constructor Summary

    Constructors
    Constructor
    Description
    MasterDetailLayout()
    Creates an empty Master Detail Layout.
    MasterDetailLayout(float masterSize, com.vaadin.flow.component.Unit masterUnit, float detailSize, com.vaadin.flow.component.Unit detailUnit)
    Creates a Master Detail Layout with the given master and detail sizes.
    MasterDetailLayout(String masterSize, String detailSize)
    Creates a Master Detail Layout with the given master and detail sizes.

  • Method Summary

    Modifier and Type
    Method
    Description
    com.vaadin.flow.shared.Registration
    addBackdropClickListener(com.vaadin.flow.component.ComponentEventListener<MasterDetailLayout.BackdropClickEvent> listener)
    Adds a listener for when the backdrop of the details overlay is clicked.
    com.vaadin.flow.shared.Registration
    addDetailEscapePressListener(com.vaadin.flow.component.ComponentEventListener<MasterDetailLayout.DetailEscapePressEvent> listener)
    Adds a listener for when the Escape key is pressed within the details area.
    com.vaadin.flow.component.Component
    getDetail()
    Gets the component currently in the detail area.
    com.vaadin.flow.component.Component
    getDetailPlaceholder()
    Gets the component currently in the detail placeholder area.
    String
    getDetailSize()
    Gets the size of the detail area.
    com.vaadin.flow.component.Component
    getMaster()
    Gets the component currently in the master area.
    String
    getMasterSize()
    Gets the size of the master area.
    MasterDetailLayout.Orientation
    getOrientation()
    Gets the orientation of the layout.
    MasterDetailLayout.OverlayContainment
    getOverlayContainment()
    Gets the overlay containment of the layout.
    String
    getOverlaySize()
    Gets the size of the detail area when shown as an overlay.
    boolean
    isAnimationEnabled()
    Gets whether the layout animation is enabled.
    boolean
    isExpandDetail()
    Gets whether the detail area expands to fill available space.
    boolean
    isExpandMaster()
    Gets whether the master area expands to fill available space.
    boolean
    isForceOverlay()
    Gets whether the layout forces the detail area to be shown as an overlay, even if there is enough space for master and detail to be shown next to each other using the default (split) mode.
    protected void
    onAttach(com.vaadin.flow.component.AttachEvent attachEvent)
     
    protected void
    onDetach(com.vaadin.flow.component.DetachEvent detachEvent)
     
    void
    removeRouterLayoutContent(com.vaadin.flow.component.HasElement oldContent)
     
    void
    setAnimationEnabled(boolean enabled)
    Sets whether the layout animation is enabled.
    void
    setDetail(com.vaadin.flow.component.Component component)
    Sets the component to be displayed in the detail area.
    void
    setDetailPlaceholder(com.vaadin.flow.component.Component component)
    Sets the component to be displayed in the detail placeholder area.
    void
    setDetailSize(float size, com.vaadin.flow.component.Unit unit)
    Sets the size of the detail area in CSS length units.
    void
    setDetailSize(float size, com.vaadin.flow.component.Unit unit, boolean expand)
    Sets the size of the detail area in CSS length units and whether the detail area expands to fill available space.
    void
    setDetailSize(float size, com.vaadin.flow.component.Unit unit, boolean expand, float overlaySize, com.vaadin.flow.component.Unit overlayUnit)
    Sets the size of the detail area, whether the detail area expands to fill available space, and the size of the detail area when shown as an overlay.
    void
    setDetailSize(float size, com.vaadin.flow.component.Unit unit, float overlaySize, com.vaadin.flow.component.Unit overlayUnit)
    Sets the size of the detail area and the size of the detail area when shown as an overlay, both in CSS length units.
    void
    setDetailSize(String size)
    Sets the size of the detail area in CSS length units.
    void
    setDetailSize(String size, boolean expand)
    Sets the size of the detail area in CSS length units and whether the detail area expands to fill available space.
    void
    setDetailSize(String size, boolean expand, String overlaySize)
    Sets the size of the detail area in CSS length units, whether the detail area expands to fill available space, and the size of the detail area when shown as an overlay.
    void
    setDetailSize(String size, String overlaySize)
    Sets the size of the detail area and the size of the detail area when shown as an overlay, both in CSS length units.
    void
    setExpandDetail(boolean expandDetail)
    Sets whether the detail area expands to fill available space.
    void
    setExpandMaster(boolean expandMaster)
    Sets whether the master area expands to fill available space.
    void
    setForceOverlay(boolean forceOverlay)
    Sets whether the layout forces the detail area to be shown as an overlay, even if there is enough space for master and detail to be shown next to each other using the default (split) mode.
    void
    setMaster(com.vaadin.flow.component.Component component)
    Sets the component to be displayed in the master area.
    void
    setMasterSize(float size, com.vaadin.flow.component.Unit unit)
    Sets the size of the master area in CSS length units.
    void
    setMasterSize(float size, com.vaadin.flow.component.Unit unit, boolean expand)
    Sets the size of the master area in CSS length units and whether the master area expands to fill available space.
    void
    setMasterSize(String size)
    Sets the size of the master area in CSS length units.
    void
    setMasterSize(String size, boolean expand)
    Sets the size of the master area in CSS length units and whether the master area expands to fill available space.
    void
    setOrientation(MasterDetailLayout.Orientation orientation)
    Sets the orientation of the layout.
    void
    setOverlayContainment(MasterDetailLayout.OverlayContainment overlayContainment)
    Sets the containment of the detail area when the layout is in overlay mode.
    void
    setOverlaySize(float size, com.vaadin.flow.component.Unit unit)
    Sets the size of the detail area when shown as an overlay.
    void
    setOverlaySize(String size)
    Sets the size of the detail area when shown as an overlay.
    void
    showRouterLayoutContent(com.vaadin.flow.component.HasElement content)
     

    Methods inherited from class com.vaadin.flow.component.Component

    addListener, bindVisible, findAncestor, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getListeners, getLocale, getParent, getTestId, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getUI, hasListener, isAttached, isTemplateMapped, isVisible, onEnabledStateChanged, removeFromParent, scrollIntoView, scrollIntoView, set, setElement, setId, setTestId, setVisible

    Methods inherited from class java.lang.Object

    clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

    Methods inherited from interface com.vaadin.flow.component.AttachNotifier

    addAttachListener

    Methods inherited from interface com.vaadin.flow.component.DetachNotifier

    addDetachListener

    Methods inherited from interface com.vaadin.flow.component.HasElement

    getElement

    Methods inherited from interface com.vaadin.flow.component.HasSize

    bindHeight, bindWidth, getHeight, getHeightUnit, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getWidth, getWidthUnit, setHeight, setHeight, setHeightFull, setMaxHeight, setMaxHeight, setMaxWidth, setMaxWidth, setMinHeight, setMinHeight, setMinWidth, setMinWidth, setSizeFull, setSizeUndefined, setWidth, setWidth, setWidthFull

    Methods inherited from interface com.vaadin.flow.component.HasStyle

    addClassName, addClassNames, bindClassName, bindClassNames, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName

  • Field Details

  • Constructor Details

    • MasterDetailLayout

      public MasterDetailLayout()
      Creates an empty Master Detail Layout.

    • MasterDetailLayout

      public MasterDetailLayout(String masterSize, String detailSize)
      Creates a Master Detail Layout with the given master and detail sizes.
      Parameters:
      masterSize - the size of the master area in CSS length units
      detailSize - the size of the detail area in CSS length units

    • MasterDetailLayout

      public MasterDetailLayout(float masterSize, com.vaadin.flow.component.Unit masterUnit, float detailSize, com.vaadin.flow.component.Unit detailUnit)
      Creates a Master Detail Layout with the given master and detail sizes.
      Parameters:
      masterSize - the size of the master area
      masterUnit - the unit for the master size
      detailSize - the size of the detail area
      detailUnit - the unit for the detail size

  • Method Details

    • getMaster

      public com.vaadin.flow.component.Component getMaster()
      Gets the component currently in the master area.
      Returns:
      the component in the master area, or null if there is no component in the master area

    • setMaster

      public void setMaster(com.vaadin.flow.component.Component component)
      Sets the component to be displayed in the master area.
      Parameters:
      component - the component to display in the master area, not null

    • getDetail

      public com.vaadin.flow.component.Component getDetail()
      Gets the component currently in the detail area.
      Returns:
      the component in the detail area, or null if there is no component in the detail area

    • setDetail

      public void setDetail(com.vaadin.flow.component.Component component)
      Sets the component to be displayed in the detail area. The details area is automatically shown when the detail component is set, and hidden when the detail component is removed by setting it to null.
      Parameters:
      component - the component to display in the detail area, or null to clear the detail area

    • getDetailPlaceholder

      public com.vaadin.flow.component.Component getDetailPlaceholder()
      Gets the component currently in the detail placeholder area.
      Returns:
      the component in the detail placeholder area, or null if there is no component in the detail placeholder area

    • setDetailPlaceholder

      public void setDetailPlaceholder(com.vaadin.flow.component.Component component)
      Sets the component to be displayed in the detail placeholder area. The placeholder is shown when no detail content is set, and is hidden when the layout is in overlay mode. Unlike the detail content, the placeholder does not become an overlay when there is not enough space.
      Parameters:
      component - the component to display in the detail placeholder area, or null to clear the detail placeholder area

    • onAttach

      protected void onAttach(com.vaadin.flow.component.AttachEvent attachEvent)
      Overrides:
      onAttach in class com.vaadin.flow.component.Component

    • onDetach

      protected void onDetach(com.vaadin.flow.component.DetachEvent detachEvent)
      Overrides:
      onDetach in class com.vaadin.flow.component.Component

    • getMasterSize

      public String getMasterSize()
      Gets the size of the master area.
      Returns:
      the size of the master area in CSS length units, or null if the size is not set

    • setMasterSize

      public void setMasterSize(String size)
      Sets the size of the master area in CSS length units. If there is not enough space to show master and detail areas next to each other, the detail area is shown as an overlay. Defaults to 30em.
      Parameters:
      size - the size of the master area in CSS length units

    • setMasterSize

      public void setMasterSize(float size, com.vaadin.flow.component.Unit unit)
      Sets the size of the master area in CSS length units. If there is not enough space to show master and detail areas next to each other, the detail area is shown as an overlay. Defaults to 30em.
      Parameters:
      size - the size of the master area
      unit - the unit

    • setMasterSize

      public void setMasterSize(String size, boolean expand)
      Sets the size of the master area in CSS length units and whether the master area expands to fill available space.
      Parameters:
      size - the size of the master area in CSS length units
      expand - true to expand the master area, false otherwise
      See Also:

    • setMasterSize

      public void setMasterSize(float size, com.vaadin.flow.component.Unit unit, boolean expand)
      Sets the size of the master area in CSS length units and whether the master area expands to fill available space.
      Parameters:
      size - the size of the master area
      unit - the unit
      expand - true to expand the master area, false otherwise
      See Also:

    • getDetailSize

      public String getDetailSize()
      Gets the size of the detail area.
      Returns:
      the size of the detail area in CSS length units, or null if the size is not set

    • setDetailSize

      public void setDetailSize(String size)
      Sets the size of the detail area in CSS length units. When there is not enough space to show master and detail areas next to each other, the detail area is shown as an overlay.

      If not specified, the size is determined automatically by measuring the detail content whenever new content is provided via setDetail(com.vaadin.flow.component.Component). The measured intrinsic size is then cached until the next setDetail(com.vaadin.flow.component.Component) call.

      Parameters:
      size - the size of the detail area in CSS length units

    • setDetailSize

      public void setDetailSize(float size, com.vaadin.flow.component.Unit unit)
      Sets the size of the detail area in CSS length units. When there is not enough space to show master and detail areas next to each other, the detail area is shown as an overlay.

      If not specified, the size is determined automatically by measuring the detail content whenever new content is provided via setDetail(com.vaadin.flow.component.Component). The measured intrinsic size is then cached until the next setDetail(com.vaadin.flow.component.Component) call.

      Parameters:
      size - the size of the detail area
      unit - the unit

    • setDetailSize

      public void setDetailSize(String size, boolean expand)
      Sets the size of the detail area in CSS length units and whether the detail area expands to fill available space.
      Parameters:
      size - the size of the detail area in CSS length units
      expand - true to expand the detail area, false otherwise
      See Also:

    • setDetailSize

      public void setDetailSize(float size, com.vaadin.flow.component.Unit unit, boolean expand)
      Sets the size of the detail area in CSS length units and whether the detail area expands to fill available space.
      Parameters:
      size - the size of the detail area
      unit - the unit
      expand - true to expand the detail area, false otherwise
      See Also:

    • setDetailSize

      public void setDetailSize(String size, String overlaySize)
      Sets the size of the detail area and the size of the detail area when shown as an overlay, both in CSS length units.
      Parameters:
      size - the size of the detail area in CSS length units
      overlaySize - the overlay size in CSS length units
      See Also:

    • setDetailSize

      public void setDetailSize(float size, com.vaadin.flow.component.Unit unit, float overlaySize, com.vaadin.flow.component.Unit overlayUnit)
      Sets the size of the detail area and the size of the detail area when shown as an overlay, both in CSS length units.
      Parameters:
      size - the size of the detail area
      unit - the unit for the detail size
      overlaySize - the overlay size
      overlayUnit - the unit for the overlay size
      See Also:

    • setDetailSize

      public void setDetailSize(String size, boolean expand, String overlaySize)
      Sets the size of the detail area in CSS length units, whether the detail area expands to fill available space, and the size of the detail area when shown as an overlay.
      Parameters:
      size - the size of the detail area in CSS length units
      expand - true to expand the detail area, false otherwise
      overlaySize - the overlay size in CSS length units
      See Also:

    • setDetailSize

      public void setDetailSize(float size, com.vaadin.flow.component.Unit unit, boolean expand, float overlaySize, com.vaadin.flow.component.Unit overlayUnit)
      Sets the size of the detail area, whether the detail area expands to fill available space, and the size of the detail area when shown as an overlay.
      Parameters:
      size - the size of the detail area
      unit - the unit for the detail size
      expand - true to expand the detail area, false otherwise
      overlaySize - the overlay size
      overlayUnit - the unit for the overlay size
      See Also:

    • getOrientation

      public MasterDetailLayout.Orientation getOrientation()
      Gets the orientation of the layout. Defaults to MasterDetailLayout.Orientation.HORIZONTAL.
      Returns:
      the orientation

    • setOrientation

      public void setOrientation(MasterDetailLayout.Orientation orientation)
      Sets the orientation of the layout. Defines how master and detail areas are shown next to each other, and whether size is applied as width or height.
      Parameters:
      orientation - the orientation

    • getOverlayContainment

      public MasterDetailLayout.OverlayContainment getOverlayContainment()
      Gets the overlay containment of the layout. Defaults to MasterDetailLayout.OverlayContainment.LAYOUT.
      Returns:
      the overlay containment

    • setOverlayContainment

      public void setOverlayContainment(MasterDetailLayout.OverlayContainment overlayContainment)
      Sets the containment of the detail area when the layout is in overlay mode. When set to MasterDetailLayout.OverlayContainment.LAYOUT, the overlay is confined to the layout. When set to MasterDetailLayout.OverlayContainment.PAGE, the overlay is confined to the browser's viewport. Defaults to MasterDetailLayout.OverlayContainment.LAYOUT.
      Parameters:
      overlayContainment - the overlay containment

    • getOverlaySize

      public String getOverlaySize()
      Gets the size of the detail area when shown as an overlay.
      Returns:
      the overlay size in CSS length units, or null if the overlay size is not set

    • setOverlaySize

      public void setOverlaySize(String size)
      Sets the size of the detail area when shown as an overlay. When not set, falls back to the detail size. Set to "100%" to make the detail cover the full layout.
      Parameters:
      size - the overlay size in CSS length units

    • setOverlaySize

      public void setOverlaySize(float size, com.vaadin.flow.component.Unit unit)
      Sets the size of the detail area when shown as an overlay. When not set, falls back to the detail size. Set to 100 with
      invalid reference 
      Unit#PCT
      to make the detail cover the full layout.
      Parameters:
      size - the overlay size
      unit - the unit

    • isExpandMaster

      public boolean isExpandMaster()
      Gets whether the master area expands to fill available space. Defaults to false.
      Returns:
      true if the master area expands, false otherwise

    • setExpandMaster

      public void setExpandMaster(boolean expandMaster)
      Sets whether the master area expands to fill available space. When both setExpandMaster(boolean) and setExpandDetail(boolean) are set to true, the master and detail areas share the available space equally.
      Parameters:
      expandMaster - true to expand the master area, false otherwise

    • isExpandDetail

      public boolean isExpandDetail()
      Gets whether the detail area expands to fill available space. Defaults to false.
      Returns:
      true if the detail area expands, false otherwise

    • setExpandDetail

      public void setExpandDetail(boolean expandDetail)
      Sets whether the detail area expands to fill available space. When both setExpandMaster(boolean) and setExpandDetail(boolean) are set to true, the master and detail areas share the available space equally.
      Parameters:
      expandDetail - true to expand the detail area, false otherwise

    • isForceOverlay

      public boolean isForceOverlay()
      Gets whether the layout forces the detail area to be shown as an overlay, even if there is enough space for master and detail to be shown next to each other using the default (split) mode.
      Returns:
      true if the overlay mode is enforced, false otherwise

    • setForceOverlay

      public void setForceOverlay(boolean forceOverlay)
      Sets whether the layout forces the detail area to be shown as an overlay, even if there is enough space for master and detail to be shown next to each other using the default (split) mode.
      Parameters:
      forceOverlay - true if the overlay mode is enforced, false otherwise

    • isAnimationEnabled

      public boolean isAnimationEnabled()
      Gets whether the layout animation is enabled.
      Returns:
      true if the animation is enabled, false otherwise

    • setAnimationEnabled

      public void setAnimationEnabled(boolean enabled)
      Sets whether the layout animation is enabled.
      Parameters:
      enabled - true if the animation is enabled, false otherwise

    • addBackdropClickListener

      public com.vaadin.flow.shared.Registration addBackdropClickListener(com.vaadin.flow.component.ComponentEventListener<MasterDetailLayout.BackdropClickEvent> listener)
      Adds a listener for when the backdrop of the details overlay is clicked. The backdrop is the area outside the detail area when it is shown in overlay mode. Can be used to hide the details when the backdrop is clicked.
      Parameters:
      listener - the listener to add, not null
      Returns:
      a registration for removing the listener

    • addDetailEscapePressListener

      public com.vaadin.flow.shared.Registration addDetailEscapePressListener(com.vaadin.flow.component.ComponentEventListener<MasterDetailLayout.DetailEscapePressEvent> listener)
      Adds a listener for when the Escape key is pressed within the details area. Can be used to hide the details when the Escape key is pressed.
      Parameters:
      listener - the listener to add, not null
      Returns:
      a registration for removing the listener

    • showRouterLayoutContent

      public void showRouterLayoutContent(com.vaadin.flow.component.HasElement content)
      Specified by:
      showRouterLayoutContent in interface com.vaadin.flow.router.RouterLayout

    • removeRouterLayoutContent

      public void removeRouterLayoutContent(com.vaadin.flow.component.HasElement oldContent)
      Specified by:
      removeRouterLayoutContent in interface com.vaadin.flow.router.RouterLayout