opinion
FloatingPanel
A sheet you drag between a few set heights, snapping on release.
Projects sheetDrag the bar, or use the arrow keys on it
Projects
MC
Harbour rebrand
On trackJW
Tideline mobile
ReviewPN
Crew interviews
LateLS
Rota export
DoneMC
Depot signage
ReviewProjects
MC
Harbour rebrand
On trackJW
Tideline mobile
ReviewFilters
Status, owner, due date.
In context
Depot mapA details sheet over a map-style screen
Northern depots
Depot signage
MC
Harbour rebrand
On trackJW
Tideline mobile
ReviewPN
Crew interviews
LateProps
| Prop | Type | Required | Default |
|---|---|---|---|
anchors | number[] | Yes | — |
placement | "bottom" | "top" | undefined | No | bottom |
defaultHeight | number | undefined | No | — |
height | number | undefined | No | — |
onHeightChange | ((height: number, animating: boolean) => void) | undefined | No | — |
handleDraggingOfContent | boolean | undefined | No | true |
header | ReactNode | No | — |
aria-label | string | undefined | No | Resize panel |
className | string | undefined | No | — |
data-rebar-* attributes
data-rebar-component="floating-panel"; data-rebar-dragging; data-rebar-part="handle"|"content".
Migrating to Ant Design
Ant Design (web) has no direct equivalent — this ports antd-*mobile*'s FloatingPanel. A migration typically hand-rolls the same anchor-snap drag pattern, or a fixed Drawer if the multi-height behavior isn't actually needed.