A troubleshooting guide is an interactive learning article that provides specific steps to self-diagnose an issue or to complete a series of configuration tasks.
The path consists of two main components: the step-progress bar, and the sections.
Progress bar
This component helps to visualize and keep track of the progress made.
The bar has three different states of activation:
- inactive- the bar has not been activated at all and no steps have been marked as completed.
- active- some or all the steps of the bar are marked as completed
- completed- all the steps and bars are completed and the path has reached its end.
Sections
Sections are containers that wraps the content of the article, and serve two purposes:
- organize the content more legibly
- expand or collapse the content as you complete and move between steps
Example of acollapsed section:
Example of anexpanded section
Sections have four different components:
- title- the main topic discussed in the section
- sub-title- provides a quick summary of the section
- expand button- when clicked, fully expands the section
- section-button- marks the section as completed and updates progress bar
The last section, when marked as completed by clicking the section-button, activates thereset button:
When clicked, the reset button automatically collapses all the sections, scrolls the article page back up, and resets both sections and step-progress bar to their inactive states.
Workflow
To get the most out of the experience, we recommend to following workflow steps:
- 点击部分扩展按钮扩展first section
- When you're done reading and/or testing, mark the first section as completed by clicking the section button
- Collapse the section
- Repeat steps 1-3 for the following section
0 Comments
Pleasesign into leave a comment.