Jx.Splitter Examples

API Reference: Jx.Splitter, Jx.Splitter.Snap

Splitting an element

The Jx.Splitter class is used to split an element into 2 or more areas that can be resized by the user. There are a variety of options for setting up a splitter, but the most basic use splits a container horizontally into two equally sized areas by creating new elements and a bar to resize them.

Splitting Vertically

In this example, the element is split vertically and we also show off using existing child nodes instead of creating elements.

This is the first child.

This is the second child.

Snaps

Snaps are controls that allow the user to snap one of the areas in a splitter closed and open. The first child can be snapped open and closed by double clicking on the bar. The third child can be snapped by clicking on the.

This is the first child.

This is the second child.

This is the third child.