Overview

Left Pane
Resizable only
Size: 170px
MinSize: 100px
Central Pane
Resizable and collapsible
MaxSize: 75%
Nested Left Pane
Resizable and collapsible
Size: 30%
MinSize: 5%
Nested Central Pane
Resizable only
Nested Right Pane
Resizable and collapsible
Size: 30%
MinSize: 5%
Right Pane
Non-resizable and non-collapsible
Size: 170px

The DevExpress Blazor Splitter component allows you to divide web page content into multiple resizable and collapsible panes. Splitter panes (DxSplitterPane objects) are stored in a Panes collection. The component ships with the following capabilities:

Horizontal and vertical pane orientation
Our Splitter component displays a single-level stack of panels. Use the Orientation property to specify pane stack direction.

Hierarchical pane structure
To create multilevel panes, insert an additional Splitter component into the pane content area.

Pane size
Use the Size property to specify vertical pane width/horizontal pane height. When the AllowResize property is set to true, users can resize the pane. Use MinSize and MaxSize properties to restrict changes to pane size.

Expand and Collapse Panes
Set a pane's AllowCollapse property to true to collapse the pane. Use the Collapsed property to determine pane collapse state. When pane state changes, the Splitter raises the CollapsedChanged event.

Keyboard Navigation
The Splitter component supports keyboard navigation. Press the Tab key or Shift+Tab to focus the Splitter separator, then use Arrow keys to move the separator and the Enter key to expand/collapse the adjacent pane.