| Table of Contents | ||
|---|---|---|
|
...
The details panel can have two modes:
Collapsed
Expanded - pinned
Expanded - unpinned
Pinned - by default the detail pane is expanded (see States below). The , and he pane is shown next to the content of the page so nothing is hidden.
Unpinned - by default the details pane is collapsed (see States below) , unless at least one item is selected. The pane overlays the main area of the page, hiding the content behind it.
In both modes, the pane can be collapsed and expanded using the collapse/expand bar on the left side of the pane (see below).
...
The content area may contain any combination of elements, such as text, lists, cards, tables, forms, graphs, links. etc.
Examples
 |  |  |
 | Image TBD   | Image TBD   |
States
State | Description | Example |
|---|---|---|
Expanded | See basic flow |  |
Collapsed | See basic flow |  |
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 |
Loading | While the details pane content is loading, a loading state will show, including a Progress progress Indicator for each of the containers. |  |
Interaction
The Pin Icon
Clicking the pin icon changes it will switch between its pinned and unpinned versionsstates.
Clicking the icon when the pane is pinned will change it to unpinned mode.
If no items are selected in the main content area, the details pane is automatically collapsed.
If one or more items are selected in the main content area, the details pane will remain open and the content will expand to full width, being partially hidden by the pane.
Clicking the icon when the pane is unpinned will change it to pinned mode.
The main content area is narrowed to appear next to the pane, so nothing is hidden.
Pane is unpinned | Pane is pinned |
|---|---|
 |  |
The Collapse/Expand
...
Area
Hovering the collapse/expand bar area switches it to hover state. (See States above).
When the pane is expanded, clicking the bar area switches it to the collapsed state.
When the pane is collapsed, clicking the bar area switches it to the expanded state.
...
When the details pane is expanded from collapsed mode, the transition pane will slide from right to left.
When the details pane is collapsed, the transition pane will slide from left to right.
...
Zeplin link | Screen thumbnail |
|---|---|
| Image TBD |  |
WFM |  |
WFM |  |
Form designer |  |
...