Svelte Split Pane

Overview:

The svelte-split-pane is a component that allows for splitting panes in either a horizontal or vertical orientation. It provides options for setting the type, id, min/max size, position, color, and thickness of the divider between panes.

Features:

• Type: Specifies whether the panes are split left-right (horizontal) or top-bottom (vertical).
• Id: Adds a data-pane={id} attribute to the element, allowing for custom CSS styling.
• Min/Max Size: Sets the minimum and maximum size of the panes as a percentage, pixels, em, or rem.
• Position: Determines the initial position of the divider, measured from the left/top or right/bottom.
• Priority: Resolves conflicts between min and max constraints to determine which constraint takes precedence.
• Color: Specifies the color of the divider between panes, with a default value of transparent.
• Thickness: Determines the thickness of the ‘hit area’ for the divider, with a default value of 8px.

Installation:

To install the svelte-split-pane component, follow these steps:

1. Install the component using npm:

npm install svelte-split-pane

2. Import the component in your Svelte app:

import SplitPane from 'svelte-split-pane';

3. Use the <SplitPane> component in your Svelte app by specifying the desired properties:

<SplitPane type="horizontal" min="20%" max="80%" pos="50%">
  <!-- Content for the left pane -->
  <div>
    Left Pane
  </div>
  
  <!-- Content for the right pane -->
  <div>
    Right Pane
  </div>
</SplitPane>

Summary:

The svelte-split-pane component is a versatile tool for dividing panes in a Svelte app. It offers a range of customizable options such as type, size, position, color, and thickness. By using this component, developers can easily create split panes with different orientations and adjust them according to their specific requirements.