| Table of Contents | ||
|---|---|---|
|
...
Where relevant, the details pane can include up to 5 tabs.
Tabs may not exceed the width of the panel; there should be no horizontal scroll.
All tabs will be of the same width, regardless of label length.
Titles will not wrap onto multiple lines. Long titles will be truncated, and a tooltip will appear on hover.
  |
The Content Area
...
State | Description | Example |
|---|---|---|
Collapsed | The only visible part of the pane is the collapse/expand area, allowing users to expand it. |   |
Expanded, pinned | the pane is shown next to the main content area, so nothing is hidden. |  |
Expanded, unpinned | the pane overlays the main area of the page, hiding the content behind it. |   |
Empty State | When no items are selected, the details pane will present an empty state with guiding text, guiding actions, or a page summary.Images to be updated - see https://zpl.io/V1ElrR5 |  |
Loading | While the content is loading, a loading state will show, including a progress Indicator. |   |
Interaction
The Pin Icon
Clicking the pin icon will switch its state from pinned to unpinned and vice versa:
When unpinned, clicking the icon will switch the pane to expanded, pinned state (see States above).
When pinned, clicking the icon will switch the pane to expanded, unpinned state (see States above).
 | When the pane is unpinned | ||
 | When the pane is pinned | | |
The Collapse/Expand Area
Hovering the collapse/expand area switches it to hover state.
When the pane is expanded, clicking the area switches it to the collapsed state.
When the pane is collapsed, clicking the area switches it to the expanded state.
...