Vaadin WC API reference

Description

<vaadin-master-detail-layout> is a web 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.

Styling

The following shadow DOM parts are available for styling:

Part name Description
backdrop Backdrop covering the master area in the drawer mode
master The master area
detail The detail area

The following state attributes are available for styling:

Attribute Description
containment Set to layout or viewport depending on the containment.
orientation Set to horizontal or vertical depending on the orientation.
has-detail Set when the detail content is provided.
drawer Set when the layout is using the drawer mode.
stack Set when the layout is using the stack mode.

See Styling Components documentation.

Properties

containment

Type: "layout" | "viewport"

Defines the containment of the detail area when the layout is in overlay mode. When set to layout, the overlay is confined to the layout. When set to viewport, the overlay is confined to the browser's viewport. Defaults to layout.

detailMinSize

Type: string | null | undefined

Minimum size (in CSS length units) to be set on the detail area. When specified, it prevents the detail area from shrinking below this size. If there is not enough space to show master and detail areas next to each other, the details are shown as an overlay: either as drawer or stack, depending on the stackOverlay property.

detailSize

Type: string | null | undefined

Fixed size (in CSS length units) to be set on the detail area. When specified, it prevents the detail area from growing or shrinking. If there is not enough space to show master and detail areas next to each other, the details are shown as an overlay: either as drawer or stack, depending on the stackOverlay property.

forceOverlay

Type: boolean

When specified, forces the details to be shown as an overlay (either as drawer or stack), even if there is enough space for master and detail to be shown next to each other using the default (split) mode.

In order to enforce the stack mode, use this property together with stackOverlay property and set both to true.

masterMinSize

Type: string | null | undefined

Minimum size (in CSS length units) to be set on the master area. When specified, it prevents the master area from shrinking below this size. If there is not enough space to show master and detail areas next to each other, the details are shown as an overlay: either as drawer or stack, depending on the stackOverlay property.

masterSize

Type: string | null | undefined

Fixed size (in CSS length units) to be set on the master area. When specified, it prevents the master area from growing or shrinking. If there is not enough space to show master and detail areas next to each other, the details are shown as an overlay: either as drawer or stack, depending on the stackOverlay property.

noAnimation

Type: boolean

When true, the layout does not use animated transitions for the detail area.

orientation

Type: "horizontal" | "vertical"

Define how master and detail areas are shown next to each other, and the way how size and min-size properties are applied to them. Possible values are: horizontal or vertical. Defaults to horizontal.

slotStyles

Type: string[]

stackOverlay

Type: boolean

When true, the layout in the overlay mode is rendered as a stack, making detail area fully cover the master area. Otherwise, it is rendered as a drawer and has a visual backdrop.

In order to enforce the stack mode, use this property together with forceOverlay property and set both to true.

Events

backdrop-click

Type: CustomEvent

backdrop-click Fired when the user clicks the backdrop in the drawer mode.

detail-escape-press

Type: CustomEvent

detail-escape-press Fired when the user presses Escape in the detail area.