Docs

Docs

Split Layout

Split Layout is a component with two content areas and a draggable split handle between them.
<SplitLayout>
  <VerticalLayout>
    <TextField label="Left 1" className="w-full" />
    <TextField label="Left 2" className="w-full" />
    <TextField label="Left 3" className="w-full" />
    <TextField label="Left 4" className="w-full" />
    <TextField label="Left 5" className="w-full" />
    <TextField label="Left 6" className="w-full" />
  </VerticalLayout>
  <VerticalLayout>
    <TextField label="Right 1" className="w-full" />
    <TextField label="Right 2" className="w-full" />
    <TextField label="Right 3" className="w-full" />
    <TextField label="Right 4" className="w-full" />
    <TextField label="Right 5" className="w-full" />
    <TextField label="Right 6" className="w-full" />
  </VerticalLayout>
</SplitLayout>

Orientation

The default orientation is horizontal, placing the content areas side by side. The orientation can also be vertical.

Orientation should be set based on the content and the screen size. The user can also be allowed to choose which orientation they want to use.

<SplitLayout orientation="vertical" style={{ maxHeight: "350px" }}>
  <VerticalLayout>
    <TextField label="Top 1" className="w-full" />
    <TextField label="Top 2" className="w-full" />
    <TextField label="Top 3" className="w-full" />
    <TextField label="Top 4" className="w-full" />
  </VerticalLayout>
  <VerticalLayout>
    <TextField label="Bottom 1" className="w-full" />
    <TextField label="Bottom 2" className="w-full" />
    <TextField label="Bottom 3" className="w-full" />
    <TextField label="Bottom 4" className="w-full" />
  </VerticalLayout>
</SplitLayout>
Important
 You can find more information in the corresponding article on vaadin.com.