#087
Split
A split dialog with a media panel beside a lead form containing name, email and a Save button.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Split" pattern (@codeatlasdev/ui demo #087, feedback/dialog) in my app.
Call get_demo({ ids: ["#087"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Detail or onboarding dialogs that pair an image or summary with a short form.
Keep these library parts, with the props and tokens the demo uses:
- Dialog, Button, TextField, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- `<Dialog bind:open title="Lead details" size="split" chromeless>`
- Two direct children: `<div class="media">` labelled Media / summary and `<div class="form">`
- Form uses `<Stack gap="3.5">` with `<TextField label="Full name" bind:value={name}` and `<TextField label="Email" type="email" bind:value={email}`
- Save is `<Button variant="filled" onclick={() => (open = false)}>`
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
How it is built
- `<Dialog bind:open title="Lead details" size="split" chromeless>`
- Two direct children: `<div class="media">` labelled Media / summary and `<div class="form">`
- Form uses `<Stack gap="3.5">` with `<TextField label="Full name" bind:value={name}` and `<TextField label="Email" type="email" bind:value={email}`
- Save is `<Button variant="filled" onclick={() => (open = false)}>`
Related
Loading source.