#963
Nested and saved
A persisted horizontal group (Folders, Main) whose Main panel holds a vertical group (Messages over Reader).
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Nested and saved" pattern (@codeatlasdev/ui demo #963, layout/resizable-panels) in my app.
Call get_demo({ ids: ["#963"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Three-pane layouts (mail, issue trackers) where the layout survives a reload.
Keep these library parts, with the props and tokens the demo uses:
- ResizableHandle, ResizablePanel, ResizablePanels from "@codeatlasdev/ui"
Behaviour to keep:
- `<ResizablePanels label="Mail" persist="ca-demo-mail-layout">`
- `<ResizablePanel id="folders" defaultSize={20} minSize={12}>` and `<ResizablePanel id="main" defaultSize={80}>`
- `<ResizablePanels direction="vertical" label="Message list and reader">` inside `main` with `list` (40) and `reader` (60)
- `<ResizableHandle label="Resize folders" />` and `<ResizableHandle label="Resize message list" />`
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="Mail" persist="ca-demo-mail-layout">`
- `<ResizablePanel id="folders" defaultSize={20} minSize={12}>` and `<ResizablePanel id="main" defaultSize={80}>`
- `<ResizablePanels direction="vertical" label="Message list and reader">` inside `main` with `list` (40) and `reader` (60)
- `<ResizableHandle label="Resize folders" />` and `<ResizableHandle label="Resize message list" />`
Related
Loading source.