split

LIVE DEMO

split is a layout that creates two content areas divided by a draggable splitter. The default split orientation is vertical, but it can be changed to horizontal.

  • XML element: split

  • Java class: JmixSplitLayout

Basics

split must contain two components or layouts to be placed on each side of the splitter. Initial splitter position depends on the size of components. Users can drag the splitter to change the split position.

split basic 
<split height="200px">
    <vbox height="100%">
        <label text="Label"/>
        <textField placeholder="TextField"/>
        <hbox spacing="true">
            <button text="Button"/>
            <button text="Button"/>
        </hbox>
    </vbox>
    <vbox height="100%">
        <label text="Label"/>
        <textField placeholder="TextField"/>
        <hbox spacing="true">
            <button text="Button"/>
            <button text="Button"/>
        </hbox>
    </vbox>
</split>

Theme Variants

LIVE DEMO

Use themeNames attribute to set a component theme.

Variant Description Supported By

minimal

Hides the visual styling of the splitter.

Aura, Lumo

small

Uses a thinner splitter that becomes visible on hover.

Aura, Lumo

splitter-spacing

Adds spacing around the splitter.

Aura, Lumo

Attributes

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - orientation - splitterPosition - themeNames - visible - width

orientation

Vaadin

Defines split orientation. Possible values:

  • VERTICAL – nested components are placed vertically. This is the default value.

  • HORIZONTAL – nested components are placed horizontally.

splitterPosition

Vaadin

Explicitly sets the initial splitter position as a percentage value.

See Also

See Vaadin Docs for more information.