#150
longpress
A native button that fires a long-press handler after an 800ms hold and shows Long press! for 1.5 seconds.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "longpress" pattern (@codeatlasdev/ui demo #150, navigation/actions) in my app.
Call get_demo({ ids: ["#150"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Touch and desktop shortcuts for secondary actions, such as selecting a row or opening a context menu.
Keep these library parts, with the props and tokens the demo uses:
- longpress from "@codeatlasdev/ui/actions"
Behaviour to keep:
- `use:longpress={800}` imported from `@codeatlasdev/ui/actions` on a native `<button`
- `onlongpress={done}` sets `fired = true` and resets it with `setTimeout(() => (fired = false), 1500)`
- Label switches with state: `{fired ? 'Long press!' : 'Press and hold (800ms)'}`
- `let fired = $state(false)`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
How it is built
- `use:longpress={800}` imported from `@codeatlasdev/ui/actions` on a native `<button`
- `onlongpress={done}` sets `fired = true` and resets it with `setTimeout(() => (fired = false), 1500)`
- Label switches with state: `{fired ? 'Long press!' : 'Press and hold (800ms)'}`
- `let fired = $state(false)`
Related
Loading source.