Component

SeamFold

It gives an ordinary row of children a physical crease. Move the seam with a native range control and the children split into two rows, with the lower half returning in reverse order.

Possible use

It could be used to let a reviewer fold the fields of a handoff card at the exact point where the discussion changes topic, or to make a presenter physically crease an agenda before reading its second half.

Reasonable alternative

A reasonable local alternative is a small CSS grid with one breakpoint or an array slice in the page. Publishing a range-controlled paper fold is difficult to defend because the fields never needed folding.

01 / Preview

Try it yourself.

1. Title
2. Status
3. Owner
4. Date

Move the creaseThe children are unfolded

Drag the crease. The lower half returns in reverse, as paperwork apparently does.

Mechanism

1: Start with four ordinary fields in one row.
2: Move the native crease slider with a pointer or arrow keys.
3: The fields split at that position and the lower half reverses.
4: Flatten the paperwork to return the row to its original order.

02 / Usage

Put it somewhere.

example.tsxTSX

import { SeamFold } from "gra-ui";
import "gra-ui/styles.css";

export function FoldedFields() {
  return (
    <SeamFold>
      <span>Title</span>
      <span>Status</span>
      <span>Owner</span>
      <span>Date</span>
    </SeamFold>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content split around the movable seam and reversed below it.