Component
FocusUnpack
It keeps several children in one compact bundle until focus splits them into separate cards; press Space to pack them together again.
01 / Preview
Try it yourself.
TitleStatusOwner
Focus to separate the children
Focus the bundle to separate its children. Press Space to pack them back together.
Mechanism
- 1
- Click or tab to focus the compact bundle.
- 2
- Watch each child move into its own card.
- 3
- Press Space or Enter to pack the cards together again.
- 4
- Focus it again whenever the collection needs another inspection.
02 / Usage
Put it somewhere.
example.tsxTSX
import { FocusUnpack } from "gra-ui";
import "gra-ui/styles.css";
export function InspectedFields() {
return (
<FocusUnpack>
<span>Title</span>
<span>Status</span>
<span>Owner</span>
</FocusUnpack>
);
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe content packed together until focus separates it.