[ @sdxc/u/layout ]
resize
Applies resize, controlling which axes a user can drag the element's resize handle along.
import { resize } from "@sdxc/u/layout";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.resize() | css({ resize: "block" }) |
u.resize("vertical") | css({ resize: "vertical" }) |
u.resize("none") | css({ resize: "none" }) |
Examples
Basic example
Use resize() to let a reader resize an element along the block axis only. Drag the textarea's corner to try it:
<textarea placeholder="Leave a comment" mix={[resize(), is(80), bs(24), ...]} />Resizing in both directions
Use resize("both") on any element whose overflow is not visible, like overflow("auto"). Drag the corner to resize the panel:
Drag the handle in the corner to make this panel any size.
<div mix={[resize("both"), overflow("auto"), is(64), bs(32), ...]}>
<p mix={[...]}>Drag the handle in the corner to make this panel any size.</p>
</div>Preventing resizing
Use resize("none") to keep an element at the size the layout gives it, removing a textarea's handle:
<textarea placeholder="Fixed size" mix={[resize("none"), is(80), bs(24), ...]} />Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.resize())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.resize())Signature
u.resize(value?: ResizeValue)