TOC/Detail View
The TOC/detail view displays a table of contents and the details for the currently selected content.
Usage
Use this pattern to categorize data within a subtab.
Guidelines
Table of Contents
- Open the disclosure triangles by default.
- Show a vertical scrollbar only when it is required by the content.
- Wrap text that is wider than the 180-pixel width of the TOC. (Never allow horizontal scrolling.)
- Don't indent more than one level under a disclosure triangle.
Detail View
- Provide a header that describes the information in the detail view. Match the wording in the TOC or expand on it if the TOC entry was compressed to fit the width. Spell out abbreviations used in the TOC item unless they are components of an official product name.
- Use sentence-style capitalization for the header.
- Avoid horizontal scrollbars in the details view.
- Group related content into sections, but keep the sections to five or fewer.
Selection
- Make the state of the TOC persistent. If the user leaves the view and then returns, ensure that the same tab in the TOC is selected. If the user hides the TOC, keep it hidden as the user navigates between objects of the same type in the Navigator.
Editing
-
To enable editing of data, open the data in a dialog.
-
Label the button "Edit..." when opening a general dialog for editing the settings of an object. Alternately, give an action its own button and dialog instead of including it in a more general dialog, for example, "Schedule DRS..." in the preceding figure.
- Vertically align the Edit button with the heading text.
- If a group of settings has multiple buttons, list the buttons on the same line.
Visual Specification
