[ @sdxc/u/state ]
detailsContent
Applies the given utilities to a <details> element's ::details-content pseudo-element, the region holding everything after the <summary>.
import { detailsContent } from "@sdxc/u/state";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.detailsContent([u.overflow("clip"), u.bs(0)]) | css({ "&::details-content": { overflow: "clip", blockSize: "0" } }) |
Examples
Basic example
Wrap utilities in detailsContent() to style the part of a <details> that opens. Click the summary:
What does it cost?
Every package is MIT licensed and free to use.<details
mix={[
detailsContent([borderEdge("inline-start", { color: "brand", width: 2 }), pis(3), mbs(2)]),
...,
]}
>
<summary mix={[cursor("pointer"), weight("semibold")]}>What does it cost?</summary>
Every package is MIT licensed and free to use.
</details>Animating open and closed
Collapse the content with detailsContent(), size it back to auto under open(), and let interpolateSize() animate between them. Click the summary:
How do releases work?
A release runs every day and publishes each package that changed since the last one.<details
mix={[
interpolateSize(),
detailsContent([
bs(0),
overflow("clip"),
transition("block-size, content-visibility", { duration: 300 }),
transitionBehavior("allow-discrete"),
]),
open(detailsContent(bs("auto"))),
...,
]}
>
<summary mix={[cursor("pointer"), weight("semibold")]}>How do releases work?</summary>
A release runs every day and publishes each package that changed since the last one.
</details>Using a custom value
Every scale argument also takes a raw CSS value, which passes through untouched.
u.detailsContent([u.overflow("clip"), u.bs("2.75rem")])Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.detailsContent([u.overflow("clip"), u.bs(0)]))Signature
u.detailsContent(input: UtilityInput<Node>)