Split Layout

On This Page

A split layout layouts children horizontally or vertically, and shows a splitter the user can drag.


    SplitLayout.builder()
        .master(new Text("Master"))
        .detail(new Text("Detail"))
        .build()


    @SplitLayout
    List panels = List.of(
        new Text("Master"),
        new Text("Detail")
      );


    @SplitLayout
    class Container {
      Object master = new Text("Master");
      Object detail = new Text("Detail");
    }

Available properties

This is the list of available properties for a split layout:

Property	Description	Notes
id	id for this component
cssClasses	list of css classes	content of the css attribute
style	inline style attributes	content of the style attribute
fullWidth	shortcut to set width:100%	true/false
orientation	horizontal/vertical
variant	the size of the dragger	small/minimal