Component

FoldOrder

Open Left flap, Middle flap and Right flap in order. Each real details panel stays open after its turn, while an early flap creases the whole draft closed and sends the notice back to the first panel.

Possible use

It could make a reviewer open three sections of a handoff brief as if paper had a preferred folding direction, or let a presenter unfold an agenda line in a fixed ceremony. The order has no relation to the information.

Reasonable alternative

A reasonable local alternative is independent details elements or one normal disclosure. Native panels should expose content, not enforce a paper-folding ritual.

01 / Preview

Try it yourself.

1Left flap

Ready to be unnecessarily flat

2Middle flap

Waiting for its turn.

3Right flap

Waiting for its turn.

Mechanism

1: Open Left flap, then Middle flap, then Right flap.
2: Each real disclosure stays open after its turn.
3: Open a flap early to crease everything closed and restart.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function FoldedNotice() {
  return <FoldOrder><span>Ready to be unnecessarily flat</span></FoldOrder>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe notice revealed inside the current folding panel.