Workspace
Split pane
Two panes and the divider between them
docksplit-pane.tsxreviewpanel-group.tsxdock-layout.tsxlogic.ts
split-pane.tsx
size={312}
Inspector
orientation
"horizontal"size
312min / max
220 / 380Usage
import { SplitPane } from "@gpuixui/dock";
import { useState } from "react";
const [size, setSize] = useState(240);
<SplitPane
size={size}
onResize={setSize}
min={160}
max={400}
dividerLabel="Sidebar width"
first={<Sidebar />}
second={<Document />}
/>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
size | number | — | the first pane's size in pixels; controlled |
onResize | (size: number) => void | — | the first pane's settled size |
min | number | 0 | the first pane's floor |
max | number | unbounded | the first pane's ceiling |
orientation | "horizontal" | "vertical" | "horizontal" | left/right vs stacked |
first / second | ReactNode | — | the two panes |
dividerLabel | string | — | the divider's accessible name |
disabled | boolean | false | refuses the drag and the keys |
Edit this page on GitHubpackages/dock/docs/split-pane.mdx