Install

Maven

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-split-layout-flow</artifactId>
</dependency>
<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-split-layout-addons-flow</artifactId>
</dependency>

Import

import com.vaadin.flow.component.splitlayout.SplitLayout;
import de.mate_ds.flow.component.splitlayoutaddons.SplitLayoutHeader;
import de.mate_ds.flow.component.splitlayoutaddons.SplitLayoutRight;
import de.mate_ds.flow.component.splitlayoutaddons.SplitLayoutRightTabbed;

Variants

Horizontal

SplitLayout splitLayout = new SplitLayout();
splitLayout.addToPrimary(new Div("Primärer Inhalt"));
splitLayout.addToSecondary(new Div("Sekundärer Inhalt"));

Vertical

SplitLayout splitLayout = new SplitLayout();
splitLayout.setOrientation(SplitLayout.Orientation.VERTICAL);
splitLayout.addToPrimary(new Div("Oben"));
splitLayout.addToSecondary(new Div("Unten"));

With Collapsible Right Side

SplitLayout splitLayout = new SplitLayout();
splitLayout.addToPrimary(new Div("Hauptinhalt"));

SplitLayoutRight right = new SplitLayoutRight();
SplitLayoutHeader header = new SplitLayoutHeader("Details");
right.add(header, new Div("Detailinhalt"));
splitLayout.addToSecondary(right);