Size Hold

Usage

SizeHold is a Box that keeps the size it had when it is told to hold. Use it on a surface that plays an exit while the content inside it can disappear first, such as a bar whose content comes from a module that renders nothing once its call ends. Without it the surface collapses around the empty space while it is still on screen.

While held is false the box is an ordinary Box and remembers how large its content makes it, observed on its own window.
When held turns true it keeps that inline and block size. The size is written before the next paint, so no frame shows the collapsed box.
When held turns false, or the box unmounts, the size is released and the box follows its content again.
A box that is first rendered held, or that has no size when it is held, holds nothing.

SizeHold takes every Box prop. as picks the tag and ref matches it. It paints nothing: the surface, border and radius come from the class you pass. Put max-inline-size: 100% on the held box (or an ancestor) when it can be wider than its container. The held inline size is a plain length and does not shrink with the viewport on its own.

Separator / Accessibility

Size Hold / API and Development

Size Hold

Usage

While held is false the box is an ordinary Box and remembers how large its content makes it, observed on its own window.
When held turns true it keeps that inline and block size. The size is written before the next paint, so no frame shows the collapsed box.
When held turns false, or the box unmounts, the size is released and the box follows its content again.
A box that is first rendered held, or that has no size when it is held, holds nothing.

Separator / Accessibility

Size Hold / API and Development