[ @sdxc/u/layout ]
anchorSize
Resolves an anchor-size() reference to a plain string, letting a panel track its trigger's size in one browser-maintained declaration.
import { anchorSize } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.minIs(u.anchorSize("trigger", "inline")) | "anchor-size(--trigger inline)" |
u.anchorSize("trigger", "block") | "anchor-size(--trigger block)" |
u.anchorSize("trigger", "self-inline") | "anchor-size(--trigger self-inline)" |
u.anchorSize("trigger", "inline", "12rem") | "anchor-size(--trigger inline, 12rem)" |
Examples
Basic example
Use anchorSize(name, "inline") as a size value to make a positioned element at least as wide as its anchor:
- Argentina
- Canada
- Peru
<div mix={[relative(), flex(), items("start"), justify("center"), is(80), bs(48)]}>
<button mix={[anchorName("country-select"), is(56), ...]}>Country</button>
<ul
mix={[
absolute(),
positionAnchor("country-select"),
positionArea("bottom"),
minIs(anchorSize("country-select", "inline")),
mbs(1),
mbe(0),
listStyle("none"),
...,
]}
>
<li>Argentina</li>
<li>Canada</li>
<li>Peru</li>
</ul>
</div>Matching the block size
Measure the anchor's height with anchorSize(name, "block") to make a positioned element exactly as tall as it:
Anchor positioning keeps the accent bar exactly as tall as this card, however many lines it grows to.
<div mix={[relative(), is(80)]}>
<p mix={[anchorName("quote-card"), is(64), m(0), ...]}>
Anchor positioning keeps the accent bar exactly as tall as this card, however many lines it
grows to.
</p>
<div
mix={[
absolute(),
positionAnchor("quote-card"),
positionArea("right"),
bs(anchorSize("quote-card", "block")),
is(1.5),
mis(3),
rounded("full"),
bg("brand.solid"),
]}
/>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.minIs(u.anchorSize("trigger", "inline")))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.minIs(u.anchorSize("trigger", "inline")))Signature
u.anchorSize(name: string, dimension: AnchorSizeDimension, fallback?: string)