Create resizeable grid and popout panels for svelte
npm install sly-svelte-paneA lightweight, flexible Svelte library for creating resizable pane layouts in your web applications, leveraging CSS variables and grid for flexible layouts.
- Create draggable and resizable panes using CSS Grid
- Utilizes CSS variables for dynamic sizing
- Customizable drag handles
- Responsive design
- TypeScript support
``bash`
pnpm add sly-svelte-pane
`svelte`
`svelte`
Pane 1
property: "--center-scale",
anchor: "right",
gridSelector: ".pane-grid-container",
}}
/>
Pane 2
property: "--center-scale-2",
anchor: "right",
gridSelector: ".pane-grid-container",
}}
/>
Pane 3
`html`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:
`css
.sly-draggable-edge-root {
background: #007bff;
}
.sly-draggable-edge-touchable {
cursor: col-resize;
}
`
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)
`typescript``
{
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
}
MIT