1.1.1 • Published 1 year ago

sly-svelte-pane v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

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
}

License

MIT

1.1.1

1 year ago

1.1.0

1 year ago

1.0.33

1 year ago

1.0.32

1 year ago

1.0.31

1 year ago

1.0.30

1 year ago

1.0.29

1 year ago

1.0.28

1 year ago

1.0.27

1 year ago

1.0.26

1 year ago

1.0.25

1 year ago

1.0.24

1 year ago

1.0.23

1 year ago

1.0.22

1 year ago

1.0.21

1 year ago

1.0.20

1 year ago

1.0.19

1 year ago

1.0.18

1 year ago

1.0.17

1 year ago

1.0.16

1 year ago

1.0.15

1 year ago

1.0.14

1 year ago

1.0.13

1 year ago

1.0.12

1 year ago

1.0.11

1 year ago

1.0.10

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago