#962
Two panels
A two-panel horizontal group (Files 25%, Editor 75%) in a bordered frame with a caption showing the live percentages.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Two panels" pattern (@codeatlasdev/ui demo #962, layout/resizable-panels) in my app.
Call get_demo({ ids: ["#962"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Split views where the user sizes a side panel: file trees, inspectors, mail readers.
Keep these library parts, with the props and tokens the demo uses:
- ResizableHandle, ResizablePanel, ResizablePanels from "@codeatlasdev/ui"
Behaviour to keep:
- `<ResizablePanels label="Workspace" onlayout={(s) => (sizes = s)}>`
- `<ResizablePanel id="files" defaultSize={25} minSize={15} maxSize={50}>` and `<ResizablePanel id="editor" defaultSize={75}>`
- `<ResizableHandle label="Resize files" />` between them
- Caption `Files {Math.round(sizes[0])}% · Editor {Math.round(sizes[1])}%`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- ResizableHandle
@codeatlasdev/ui - ResizablePanel
@codeatlasdev/ui - ResizablePanels
@codeatlasdev/ui
How it is built
- `<ResizablePanels label="Workspace" onlayout={(s) => (sizes = s)}>`
- `<ResizablePanel id="files" defaultSize={25} minSize={15} maxSize={50}>` and `<ResizablePanel id="editor" defaultSize={75}>`
- `<ResizableHandle label="Resize files" />` between them
- Caption `Files {Math.round(sizes[0])}% · Editor {Math.round(sizes[1])}%`
Related
Loading source.