HorizontalSplitPanel and VerticalSplitPanel

    HorizontalSplitPanel and VerticalSplitPanel are a two-component containers that divide the available space into two areas to accomodate the two components. HorizontalSplitPanel makes the split horizontally with a vertical splitter bar, and VerticalSplitPanel vertically with a horizontal splitter bar. The user can drag the bar to adjust its position.

    You can set the two components with the setFirstComponent() and setSecondComponent() methods, or with the regular addComponent() method.

    Java

    See the on-line example.

    The result is shown in . Observe that the tree is cut horizontally as it can not fit in the layout. If its height exceeds the height of the panel, a vertical scroll bar will appear automatically. If horizontal scroll bar is necessary, you could put the content in a Panel, which can have scroll bars in both directions.

    You can set the split position with setSplitPosition(). It accepts any units defined in the Sizeable interface, with percentual size relative to the size of the component.

    Java

    See the on-line example.

    Another version of the setSplitPosition() method allows leaving out the unit, using the same unit as previously. The method also has versions take take a boolean parameter, reverse, which allows defining the size of the right or bottom panel instead of the left or top panel.

    The split bar allows the user to adjust the split position by dragging the bar with mouse. To lock the split bar, use setLocked(true). When locked, the move handle in the middle of the bar is disabled.

    Java

    Setting the split position programmatically and locking the split bar is illustrated in .

    splitpanel splitposition

    A Layout With Nested SplitPanels

    Notice that the size of a split panel must not be undefined in the split direction.

    CSS

    The entire split panel has the style v-splitpanel-horizontal or v-splitpanel-vertical, depending on the panel direction. The split bar or splitter between the two content panels has either the …-splitter or …-splitter-locked style, depending on whether its position is locked or not.