Splitter
Splitter is utilized to separate and resize panels.
Splitter requires two SplitterPanel components as children which are displayed horizontally by default.
Panel 1
Panel 2
Usage #
Examples #
Horizontal #
Splitter requires two SplitterPanel components as children which are displayed horizontally by default.
Panel 1
Panel 2
Size #
When no panelSizes are defined, panels are split 50/50, use the panelSizes property to give relative widths e.g. [25, 75].
Panel 1
Panel 2
Vertical #
Panels are displayed as stacked by setting the layout to vertical.
Panel 1
Panel 2
Nested #
Splitters can be combined to create advanced layouts.
Panel 1
Panel 2
Panel 3
Panel 4
Accessibility #
Screen Reader
Splitter bar defines separator as the role with aria-orientation set to either horizontal or vertical.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus through the splitter bar. |
| down arrow | Moves a vertical splitter down. |
| up arrow | Moves a vertical splitter up. |
| left arrow | Moves a vertical splitter to the left. |
| right arrow | Moves a vertical splitter to the right. |
