On this page
Overview
Show code, DocumentDrafts.tsx
Variants
- Open
Working beside the page, at a height people can change.
- Minimized
Setting a panel aside as a tab over the bottom edge, with its content kept and nothing moved.
- Maximized
Giving one panel the whole region, behind the open panels.
A maximized panel fills the region; Restore returns it to the row.
Show code, MaximizedPanel.tsx
Anatomy
Dock
Panel
Header
Title
Meta
Actions
Window controls
Tab
Show code, PanelDockAnatomy.tsx
Behaviour
The header
Each panel's header stays in view as its content scrolls, with its title, the application's actions and the window controls.
Make room
Open panels take their preferred width and shrink to a minimum, then the row scrolls sideways.
- The dock can instead minimize the panel used longest ago, and open it again once there is room.
Show code, MinimizeWhatDoesNotFit.tsx
Adapting to width
Where the dock is narrow, such as on a phone, one panel at a time fills the region like a sheet, and the others wait as tabs. In a narrow panel, the header's actions and controls take a row of their own above the title.
Show code, NarrowRegion.tsx
Rules
Keep the tabs short, and one panel at the front.
Use it when
- Items worked on beside the page and switched between, such as drafts or conversations
- Work that must survive being set aside, such as an unsaved draft
- Several windows open in a workspace, minimized, maximized, resized and closed
Show code, ShortTabLabels.tsx
Where it goes
Put the dock in a region with a height of its own, or directly in a Scaffold's body, where it lies over the visible area.
One panel at the front
Activate a panel when it opens, and keep at most one maximized.
- While a panel fills the region, keep people from reaching the content beneath it.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves through each panel's resize handle, header and content, then through the tabs. |
| ↑, ↓ on a resize handle | Makes the panel a little taller or shorter, more with Shift. |
| Home, End on a resize handle | Makes the panel its lowest or greatest height. |
| Enter or Space on Minimize | Minimizes the panel and moves focus to its tab. |
| Enter or Space on Maximize or Restore | Fills the region with the panel, or returns it to the row. |
| Enter or Space on Close | Closes the panel and moves focus to the panel that remains, or to the last tab. |
| Enter or Space on a tab | Brings its panel back, with focus where it was in its content. |
| Enter or Space on a tab's close button | Closes the panel and moves focus to the tab in its place. |