Fold Panel
A disclosure card whose details unfold like paper in hinged 3D sections with crease shading, or expand in height under reduced motion.
Preview
Order #4821
Shipped · 2 items · $284.50
Lisbon ⇄ Porto
2 tickets · Booked by Ines
Outbound · Fri 14 Nov
Lisbon 07:40 → Porto 10:31
Coach 4 · Seat 62, window
Return · Sun 16 Nov
Porto 18:09 → Lisbon 21:05
Coach 2 · Seat 15, aisle
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Heading of the panel, always visible. Names the details region. |
| summary | ReactNode | — | One line under the title, always visible. |
| segments | ReactNode[] | — | The folded sections; 2 or 3 work best. |
| segmentHeight | number | 76 | Height of each folded section in px. |
| open | boolean | — | Controlled state. Pair with onOpenChange. |
| defaultOpen | boolean | false | Initial state when uncontrolled. |
| onOpenChange | (open: boolean) => void | — | Called when the panel opens or closes. |
| labels | { open: string; close: string } | { open: "Show details", close: "Hide details" } | Button text when closed and open. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.