On this page
Overview
A main pane and a supporting one.
Show code, SupportingPane.tsx
A list and its detail.
Show code, ListAndDetail.tsx
Variants
Side by side
The panes sit side by side once they are as wide as a medium, an expanded or a large window.
- Medium
A main pane that reads well narrow, such as a list.
- Expanded
Most panes. The default.
- Large
A wide main pane, such as a table or a canvas.
Resizable
People can resize the supporting pane or the list by the gap between the panes, with its small grip, by pointer or with the arrow keys.
Show code, ResizableDetails.tsx
Anatomy
Root
List
Divider
Detail
Show code, PanesAnatomy.tsx
Behaviour
Scrolling
Each pane scrolls on its own where the panes have a height, as in a Scaffold whose body scrolls. Where the page scrolls, the panes scroll with it.
Adapting to width
The panes decide how they sit from their own width alone.
- A supporting pane becomes a side sheet in a medium width and a bottom sheet in a compact one, which a button in the main pane opens. The sheet is on a Sheet's color, so a surface in the pane reads as the same panel.
- In less room a list and its detail show one at a time, and a back button named after the list, here Team inbox, returns to it.
Show code, SupportingByWidth.tsx
Show code, ListDetailByWidth.tsx
Rules
Whatever the room, people can reach both panes.
Use it when
- A main pane with a supporting one, such as a document and its details
- A list beside the chosen item's detail, such as messages
Show code, DetailsButton.tsx
Show code, NoWayToDetails.tsx
Between two surfaces
A resizable gap goes between two surfaces, one in each pane.
- Beside content that floats on the page, such as a list beside bare text, its grip hangs in empty space with nothing to say what it resizes.
- So leave it out where the panes have no surfaces.
Navigation and nesting
The application's navigation goes in the Scaffold, not in a supporting pane.
- The next level shows in the detail rather than in panes inside a pane.
Accessibility
| Key | Action |
|---|---|
| Esc in the supporting sheet | Closes it, and focus returns to where it was. |
| ←, → on the divider | Moves the divider a little; further with Shift. |
| Page Up, Page Down on the divider | Moves the divider further. |
| Home, End on the divider | Moves the resized pane to its smallest or largest width. |
| Enter on the back button | Returns from the detail to the list, and focus to its current row. |