Docs

Documentation versions (currently viewingVaadin 24)

Master-Detail Layout

Styling API reference for the Master Detail Layout component.

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Root element

vaadin-master-detail-layout

States

Overlay mode

vaadin-master-detail-layout[overlay]

Stack mode

vaadin-master-detail-layout[stack]

Horizontal orientation

vaadin-master-detail-layout[orientation="horizontal"]

Vertical orientation

vaadin-master-detail-layout[orientation="vertical"]

Default (layout) containment

vaadin-master-detail-layout[containment="layout"]

Viewport containment

vaadin-master-detail-layout[containment="viewport"]

Layout with detail provided

vaadin-master-detail-layout[has-detail]

Parts

Master area

vaadin-master-detail-layout::part(master)

Detail area

vaadin-master-detail-layout::part(detail)

Backdrop in the overlay mode

vaadin-master-detail-layout::part(backdrop)