#091
Open from a button
A lightbox opened from a button to show a single generated SVG image.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Open from a button" pattern (@codeatlasdev/ui demo #091, feedback/lightbox) in my app.
Call get_demo({ ids: ["#091"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Enlarging one thumbnail or photo to full view on click.
Keep these library parts, with the props and tokens the demo uses:
- Button, Lightbox from "@codeatlasdev/ui"
Behaviour to keep:
- `<Lightbox bind:open src={photo} alt="Gray circle on a dark background" />`
- `photo` is a `data:image/svg+xml;utf8,` URL built with `encodeURIComponent`, 640 by 400 with a circle `r="90"`
- Trigger is `<Button variant="outlined" onclick={() => (open = true)}>` labelled View photo
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
- `<Lightbox bind:open src={photo} alt="Gray circle on a dark background" />`
- `photo` is a `data:image/svg+xml;utf8,` URL built with `encodeURIComponent`, 640 by 400 with a circle `r="90"`
- Trigger is `<Button variant="outlined" onclick={() => (open = true)}>` labelled View photo
Related
Loading source.