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. |