[ @sdxc/u/responsive ]
Sugar over media("print", input).
import { print } from "@sdxc/u/responsive";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.print(u.hidden()) | css({ "@media print": { display: "none" } }) |
Examples
Basic example
Use print(...) to apply utilities only when the page is printed, like hiding buttons that mean nothing on paper. Open your browser's print preview to see the buttons gone:
Invoice #1042 — $240.00
<div mix={[vstack({ gap: 3 }), ...]}>
<p mix={[weight("semibold")]}>Invoice #1042 — $240.00</p>
<div mix={[hstack({ gap: 2 }), print(hidden())]}>
<button type="button" mix={[bg("brand.solid"), fg("brand.onSolid"), ...]}>
Pay now
</button>
<button type="button" mix={[bg("neutral.tint"), fg("neutral.emphasis"), ...]}>
Download
</button>
</div>
</div>Expanding scroll areas
Release fixed heights for print, like print([overflow("visible"), bs("auto")]), so content behind a scroll area reaches the paper. Open your browser's print preview to see the whole text:
This paragraph is taller than its box, so on screen the last lines of it are behind a scroll. On paper nothing scrolls, so the box grows to print every line of it.
<div
mix={[
scroll("y"),
bs(24),
is(72),
maxIs("100%"),
print([overflow("visible"), bs("auto")]),
...,
]}
>
<p mix={[...]}>
This paragraph is taller than its box, so on screen the last lines of it are behind a
scroll. On paper nothing scrolls, so the box grows to print every line of it.
</p>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.print(u.hidden()))Signature
u.print(input: UtilityInput<Node>)