Sly-svelte-pane NPM

Svelte Pane

A lightweight, flexible Svelte library for creating resizable pane layouts in your web applications, leveraging CSS variables and grid for flexible layouts.

Features

Create draggable and resizable panes using CSS Grid
Utilizes CSS variables for dynamic sizing
Customizable drag handles
Responsive design
TypeScript support

Installation

pnpm add sly-svelte-pane

Usage

1. Import the components

<script>
  import { DraggableEdge } from 'sly-svelte-pane';
</script>

2. Create a resizable pane layout

<main class="pane-grid-container">
    <div class="pane">
        <h1>Pane 1</h1>
        <DraggableEdge
            options={{
                property: "--center-scale",
                anchor: "right",
                gridSelector: ".pane-grid-container",
            }}
        />
    </div>
    <div class="pane">
        <h1>Pane 2</h1>
        <DraggableEdge
            options={{
                property: "--center-scale-2",
                anchor: "right",
                gridSelector: ".pane-grid-container",
            }}
        />
    </div>
    <div class="pane">
        <h1>Pane 3</h1>
    </div>
</main>

3. Set up CSS variables and grid layout

<style>
    :root {
        --center-scale: 50%;
        --center-scale-max: 90%;
        --center-scale-min: 10%;
        --center-scale-2: 50%;
        --center-scale-2-max: 90%;
        --center-scale-2-min: 10%;
    }

    main {
        display: grid;
        grid-template-columns: var(--center-scale) var(--center-scale-2) 1fr;
    }
</style>

Styling

The package includes default styles for the draggable edge. You can customize these styles by overriding the following CSS classes:

.sly-draggable-edge-root: Styles the root container of the draggable edge.
.sly-draggable-edge-touchable: Styles the touchable area of the draggable edge.

Example of custom styling:

.sly-draggable-edge-root {
  background: #007bff;
}

.sly-draggable-edge-touchable {
   cursor: col-resize;
}

API

DraggableEdge

A Svelte component that creates a draggable edge for resizing panes. Place it inside the grid element you want to resize.

Props:

options: DraggableOptions (required)

DraggableOptions

{
  property: string;       // CSS variable to update (e.g., "--center-scale")
  anchor: "left" | "right" | "top" | "bottom";  // Edge anchor position
  gridSelector: string;   // Selector for the parent grid container
}