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

Using the package

Import

Make sure to install the React Resizable Panels package, react-resizable-panels.

To install the @salt-ds/react-resizable-panels-theme package, run the command appropriate to your environment: yarn add @salt-ds/react-resizable-panels-theme or npm install @salt-ds/react-resizable-panels-theme

Import Salt React Resizable Panels theme

To import the Salt React Resizable Panels theme, use:

Then wrap your React Resizable Panel Group with the react-resizable-panels-theme-salt class name:

Customizing the appearance

To customize the appearance of panel resize handles and panels, follow these guidelines:

Panel Resize Handles

Border Customization: To add borders to the resize handles, apply the class resize-handle-salt-border-<border> to the PanelResizeHandle component. Replace <border> with the specific border side you want to style (e.g., top, bottom, left, right).
Background Color Customization: To set the background color of the resize handles, use the class resize-handle-salt-variant-<variant>. Replace <variant> with the desired variant (primary, secondary, tertiary) to match the corresponding Salt DS container background color. This ensures that the resize handles visually integrate with the theme's design.

Panels

Background Color Customization: For the panels themselves, apply the class resizable-panel-salt-variant-<variant> to the Panel component. Replace <variant> with the appropriate variant (primary, secondary, tertiary) to set the panel's background color to the associated Salt DS container background color. This helps maintain a consistent and cohesive look across your application.

By using these class names, you can ensure that both the resize handles and panels are styled correctly, providing a seamless and visually appealing user interface.