On this page
Overview
Show code, OpenDocuments.tsx
Variants
Buttons after the tabs
The application's own content can follow the tabs, outside the strip that scrolls.
Show code, CloseAllButton.tsx
Anatomy
Strip
Item
Tab
Icon
Label
Close button
End
Show code, DocumentTabsAnatomy.tsx
Behaviour
Closing
Several ways close a tab, and focus moves to the tab that becomes active.
- The close button, a middle click, Delete or Backspace.
- Close in a tab's context menu, which can also offer Close all tabs.
- On touch screens the close buttons always show.
Preview and reorder
A preview tab shows its label in italics until a double click keeps it.
- Where tabs can be put in order, a tab dragged with a mouse or pen shows where it will land.
- The context menu then offers Move left and Move right.
Adapting to width
The strip takes the width it is given and scrolls sideways where its tabs don't fit.
- Tabs fade at an edge they run past.
- The active tab scrolls into view.
Show code, ManyTabs.tsx
Rules
A tab names its document, and closing one never loses work.
Use it when
- Switching between several open documents or files, such as in an editor
- Tabs that open and close as people work, one perhaps a preview until kept
Show code, NameAsLabel.tsx
Show code, PathAsLabel.tsx
Closing the active tab
Activate a neighbor when the active tab closes.
- Offer a way back when the last one closes.
- Ask before closing a document with unsaved changes.
Inside a tab
A tab holds its icon, its name and its close button, and no other controls.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to the active tab, the strip's one tab stop, and out; close buttons aren't stops. |
| ←, → | Moves to the previous or next tab and activates it, wrapping, in the reading direction. |
| Home, End | Moves to the first or last tab and activates it. |
| Enter or Space | Activates the focused tab. |
| Delete or Backspace | Closes the focused tab; focus moves to the tab that becomes active. |
| Shift+F10 or Menu | Opens the context menu for the focused tab. |