Accessible resizable panel groups with a drag handle.
Left panel
Right panel
<div class="res-wrap"> <div class="res-pane left" style="flex:0 0 40%;"> Left panel </div> <div class="res-handle"></div> <div class="res-pane" style="flex:1;"> Right panel </div> </div>
Installation
Built with pure HTML and CSS. Include ds-shared.css in your project.
pnpm add @norbielink/ds
API Reference
Classes
| Class | Description |
|---|---|
res-wrap | Flex row container |
res-pane | Content panel (use flex to control size) |
res-handle | Drag handle between panes |
res-handle.dragging | Active drag state |
res-dk | Dark mode modifier |