Splitter

External dependency

Splitter allows users to customize their workspace layout by interactively adjusting the boundaries between two or more panels, either horizontally or vertically, depending on the orientation and arrangement of the panels.

In code, this is implemented using the React Resizable Panels library, which ensures visual consistency through a Salt-styled package.

Also known as: React Resizable Panels Theme
Salt package@salt-ds/react-resizable-panels-theme
External dependencyreact-resizable-panels
Compatible versions^3.0.0
CodeDesign
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Keyboard interactions

KeyFunction
Left arrow
  • Moves a vertical splitter to the left.
Right arrow
  • Moves a vertical splitter to the right.
Up arrow
  • Moves a horizontal splitter up.
Down arrow
  • Moves a horizontal splitter down.
Enter
  • If the primary pane is not collapsed, collapses the pane.
  • If the pane is collapsed, restores the splitter to its previous position.
Home
  • Moves splitter to the position that gives the primary pane its smallest allowed size. This may completely collapse the primary pane.
End
  • Moves splitter to the position that gives the primary pane its largest allowed size. This may completely collapse the secondary pane.
F6
  • Cycle through window panes.

References