[ @sdxc/u/general ]
pointer-events
Applies pointer-events.
import { pointerEvents } from "@sdxc/u/general";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.pointerEvents() | css({ pointerEvents: "none" }) |
u.pointerEvents("auto") | css({ pointerEvents: "auto" }) |
Examples
Basic example
Use pointerEvents() on something laid over a control, like an icon, so clicks pass through to whatever is underneath. Click the magnifying glass:
<div mix={[relative(), is("full"), maxIs(72)]}>
<input
type="search"
placeholder="Search recipes"
mix={[
is("full"),
p(2, 3, 2, 9),
rounded("md"),
border({ color: "neutral.border", width: 1, style: "solid" }),
]}
/>
<span
mix={[
pointerEvents(),
absolute(),
insBs(0),
insBe(0),
insIs(3),
hstack({ align: "center" }),
fg("neutral.muted"),
]}
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
stroke="currentColor"
stroke-width="1.5"
>
<circle cx="7" cy="7" r="5" />
<path d="m11 11 3.5 3.5" />
</svg>
</span>
</div>Restoring pointer events
Use pointerEvents("auto") inside a layer set to pointerEvents() to make one part of it clickable again. Both the links and the Undo button respond:
Message archived
<div mix={[relative(), is("full"), p(4, 4, 20, 4), ...]}>
<nav mix={[...]}>
<a href="/inbox" mix={[hover(textDecoration())]}>
Inbox
</a>
<a href="/archive" mix={[hover(textDecoration())]}>
Archive
</a>
<a href="/trash" mix={[hover(textDecoration())]}>
Trash
</a>
</nav>
<div
mix={[
pointerEvents(),
absolute(),
inset(0),
hstack({ align: "end", justify: "center" }),
p(3),
]}
>
<div mix={[pointerEvents("auto"), hstack({ gap: 4, align: "center" }), ...]}>
<span>Message archived</span>
<button mix={[weight("semibold"), fg("brand"), bg("transparent")]}>Undo</button>
</div>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.pointerEvents())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.pointerEvents())Signature
u.pointerEvents(value?: PointerEventsValue)