Resizable
pura-resizable is a native web component that splits the space into two panels (start and end) separated by a divider that can be dragged with the pointer or adjusted with the keyboard arrow keys. Use it whenever you need user-adjustable layouts, such as side-by-side editors, lists with a detail panel, or split previews. It supports horizontal or vertical orientation.
Preview
<pura-resizable value="40" min="15" style="height: 240px; border: 1px solid var(--pura-border); border-radius: var(--pura-radius);">
<div slot="start" style="padding: 1rem;">
<strong>Files</strong>
<ul style="margin: 0.5rem 0 0; padding-left: 1.25rem;">
<li>index.html</li>
<li>style.css</li>
<li>app.js</li>
</ul>
</div>
<div slot="end" style="padding: 1rem;">
<strong>Editor</strong>
<p style="margin: 0.5rem 0 0; color: var(--pura-muted);">
Drag the divider in the center to resize the panels.
</p>
</div>
</pura-resizable>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | horizontal | Split direction: horizontal (panels side by side) or vertical (stacked). |
min | number | 10 | Minimum percentage allowed for each panel (clamped between 0 and 45). |
value | number | 50 | Initial split percentage assigned to the start panel. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/resizable.js"></script>import "./pura/lib/resizable.js";