Splitter

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

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:

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

• 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.

• 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.

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

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:

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

• 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.

• 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.

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

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:

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

• 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.

• 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.