Splitter

React Resizable Panels Theme is a package that adds Salt theme styles to react-resizable-panels. The package contains CSS files only, and works with react-resizable-panels from version 3.0.0 upwards.

Also known as: React Resizable Panels Theme
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected

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.

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

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

For a PanelGroup with direction horizontal:

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