[ @sdxc/u/state ]
data
Sugar over an element's own data-* attribute selector: matches &[data-{attribute}] (any value, including a bare boolean attribute) with no value argument, or &[data-{attribute}="{value}"] with one.
import { data } from "@sdxc/u/state";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.data("orientation", "vertical", u.flexCol()) | css({ '&[data-orientation="vertical"]': { flexDirection: "column" } }) |
u.data("disabled", u.opacity(50)) | css({ "&[data-disabled]": { opacity: 0.5 } }) |
Examples
Basic example
Pass an attribute and a value to data() to style an element by one of its data-* attributes:
AccountBillingTeam
<div
mix={[hstack({ gap: 1 }), p(1), rounded("lg"), border({ color: "neutral.border", width: 1 })]}
>
<span
data-state="inactive"
mix={[
fg("neutral.muted"),
data("state", "active", [bg("brand.solid"), fg("brand.onSolid")]),
...,
]}
>
Account
</span>
<span
data-state="active"
mix={[
fg("neutral.muted"),
data("state", "active", [bg("brand.solid"), fg("brand.onSolid")]),
...,
]}
>
Billing
</span>
<span
data-state="inactive"
mix={[
fg("neutral.muted"),
data("state", "active", [bg("brand.solid"), fg("brand.onSolid")]),
...,
]}
>
Team
</span>
</div>Matching a flag
Leave out the value to match the attribute whenever it is present, like a bare data-done flag:
- Write the README
- Publish to npm
- Announce it
<ul mix={[...]}>
<li data-done mix={[fg(), data("done", [textDecoration("line-through"), opacity(50)])]}>
Write the README
</li>
<li mix={[fg(), data("done", [textDecoration("line-through"), opacity(50)])]}>
Publish to npm
</li>
<li mix={[fg(), data("done", [textDecoration("line-through"), opacity(50)])]}>Announce it</li>
</ul>Switching layout
Any utility works inside data(), like flexCol() to stack a toolbar marked data-orientation="vertical":
1
2
3
1
2
3
<div mix={[...]}>
<div
data-orientation="horizontal"
mix={[hstack({ gap: 2 }), data("orientation", "vertical", flexCol())]}
>
<div mix={[...]}>1</div>
<div mix={[...]}>2</div>
<div mix={[...]}>3</div>
</div>
<div
data-orientation="vertical"
mix={[hstack({ gap: 2 }), data("orientation", "vertical", flexCol())]}
>
<div mix={[...]}>1</div>
<div mix={[...]}>2</div>
<div mix={[...]}>3</div>
</div>
</div>Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.data("orientation", "vertical", u.flexCol()))Signature
u.data(attribute: string, input: UtilityInput<Node>)