Resizable
Resizable panel groups with draggable handles.
Sidebar Drag the divider →
Content
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest init Add the PaneForge dependency, then copy the source into $lib/components/ui/resizable.
npm install paneforge Usage
<script lang="ts">
import * as Resizable from '$lib/components/ui/resizable';
</script>
<Resizable.PaneGroup direction="horizontal">
<Resizable.Pane defaultSize={50}>One</Resizable.Pane>
<Resizable.Handle withHandle />
<Resizable.Pane defaultSize={50}>Two</Resizable.Pane>
</Resizable.PaneGroup>