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.
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-primaryresizable-panel-salt-variant-secondaryresizable-panel-salt-variant-tertiary
For the PanelResizeHandle Component:
Apply these class names to select the appropriate background variant:
resize-handle-salt-variant-primaryresize-handle-salt-variant-secondaryresize-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-topresize-handle-salt-border-bottom
For a PanelGroup with direction horizontal:
resize-handle-salt-border-leftresize-handle-salt-border-right
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-primaryresizable-panel-salt-variant-secondaryresizable-panel-salt-variant-tertiary
For the PanelResizeHandle Component:
Apply these class names to select the appropriate background variant:
resize-handle-salt-variant-primaryresize-handle-salt-variant-secondaryresize-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-topresize-handle-salt-border-bottom
For a PanelGroup with direction horizontal:
resize-handle-salt-border-leftresize-handle-salt-border-right
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-primaryresizable-panel-salt-variant-secondaryresizable-panel-salt-variant-tertiary
For the PanelResizeHandle Component:
Apply these class names to select the appropriate background variant:
resize-handle-salt-variant-primaryresize-handle-salt-variant-secondaryresize-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-topresize-handle-salt-border-bottom
For a PanelGroup with direction horizontal:
resize-handle-salt-border-leftresize-handle-salt-border-right