Panes
The Splitter component divides content into resizable sections called panes. Each pane can contain different content and be configured independently to create flexible, user-customizable layouts.
You can control the following aspects of Splitter panes:
- Dimensions—Set initial sizes and size constraints.
- Resizing—Enable or disable user resizing.
- Collapsing—Allow panes to be hidden and shown.
- Scrolling—Control content overflow behavior.
- Persisting Pane State—Save user preferences across sessions.
Dimensions
The size property controls the dimensions of the Splitter panes. To control the minimum and maximum size of a pane, use the min and max properties of the SplitterPane component. The min, max and size properties accept units in both pixel and percentage values.
To let the Splitter evenly distribute the available space between panes of non-declared size, leave the size of one or more panes unspecified. Otherwise, if you declare size for all panes, the Splitter will throw an error in development mode.
The following example demonstrates how to specify the dimensions of the Splitter panes.
Resizing
By default, the Splitter lets users resize its panes. To turn off this behavior, set the resizable property to false.
The following example demonstrates how to disable the resizing feature of the Splitter panes.
Collapsing
You can let a Splitter pane collapse by setting the collapsible property to true. As a result, the Splitter renders a button which shows or hides the pane. To collapse a pane, you can also double-click the split-bar. To render a pane that starts collapsed, use the collapsed property.
The following example shows how to collapse a pane by using the collapsible property. Click the Collapse button to collapse the left pane, or double-click the split-bar between the panes.
Scrolling
By default, the content of the Splitter panes is scrollable. To turn off the scrolling feature, set the scrollable property to false.
The following example demonstrates how to disable the scrolling feature of the Splitter panes.
Persisting Pane State
To persist the pane state, including both size and collapse state, bind to the relevant properties and store their values in a persistent storage solution. For the size property, use two-way binding with a getter/setter pattern to automatically persist changes. For the collapsed property, use event handling with the collapsedChange event. This approach lets users maintain their preferred layout across application sessions.
The following demo shows persistence for both pane size and collapse state by using two-way binding for size and handling the collapsedChange event. The demo stores values in localStorage. Modify the panes and reload the page to see the state persistence in action.