Skip to content
Paramanu v0.1.0-alpha.0

Splitter

Splitter creates resizable panels with a draggable handle. Supports horizontal and vertical orientations.

Basic Usage

Left
Right
import { Splitter, SplitterPanel, SplitterHandle } from "@paramanu/primitives-react"


export default function App() {
return (
  <Splitter style={{ height: 300 }}>
    <SplitterPanel defaultSize={50}><div>Left</div></SplitterPanel>
    <SplitterHandle />
    <SplitterPanel defaultSize={50}><div>Right</div></SplitterPanel>
  </Splitter>
)
}
<div class="pm-splitter pm-splitter--horizontal" style="height: 300px; border: 1px solid #e2e8f0;">
<div class="pm-splitter__panel" style="width: 50%;"><div style="padding: 16px;">Left</div></div>
<div class="pm-splitter__handle pm-splitter__handle--horizontal" role="separator" tabindex="0"></div>
<div class="pm-splitter__panel" style="width: 50%;"><div style="padding: 16px;">Right</div></div>
</div>