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 dependency	react-resizable-panels
Compatible versions	^3.0.0

Code Design

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

Default

Applies the default look when applying the Salt theme. By default, the resize handles are transparent, allowing the background color of the parent container to be visible through them.

Show code

Variants

Both the resize handles and the resizable panels offer three background variants.

For the Panel Component:
Use the following class names to apply the desired background variant:

resizable-panel-salt-variant-primary
resizable-panel-salt-variant-secondary
resizable-panel-salt-variant-tertiary

For the PanelResizeHandle Component:
Apply these class names to select the appropriate background variant:

resize-handle-salt-variant-primary
resize-handle-salt-variant-secondary
resize-handle-salt-variant-tertiary

Show code

Border

There are 4 border directions in the the Salt React Resizable Panels theme: top, bottom, left and right. By default, the PanelResizeHandle components will render with no borders, to add borders to the handles, apply any of the following classNames to PanelResizeHandle:

For a PanelGroup with direction vertical:

resize-handle-salt-border-top
resize-handle-salt-border-bottom

Show code

For a PanelGroup with direction horizontal:

resize-handle-salt-border-left
resize-handle-salt-border-right

Show code