Component
SideSplit
It presents one child at a time and makes you send each one left or right, preserving the resulting split after the final decision.
01 / Preview
Try it yourself.
Route the next piece
Piece 1Keep visible
Left side
0Right side
0Send each field left or right. The two lists stay split after the final choice.
Mechanism
- 1
- Start with one field waiting for a destination.
- 2
- Place the next field on the left or right.
- 3
- Each choice removes the field from the queue and keeps it in its side.
- 4
- Finish the split, then wonder why the parent could not do this.
02 / Usage
Put it somewhere.
example.tsxTSX
import { SideSplit } from "gra-ui";
import "gra-ui/styles.css";
export function SortFields() {
return (
<SideSplit>
<span>Title</span>
<span>Status</span>
<span>Owner</span>
</SideSplit>
);
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe pieces routed one at a time into the two sides.