Component > Output Panel

In some applications it’s useful for the author and user to see an example of system output (along with any input in the previous panel).

Anatomy

Output panel

Usage

In many cases it’s important to not only see the example code, but to also see the output from the system, API or application. This serves two purposes; firstly it lets the user see the expected output to check for errors, and secondly it helps with understanding the purpose of the code.

States

  • Visible: The code output panel shows the code in a monospace typeface.
  • Selected: The code output panel allows word, line, or ‘all’ selections to be made

Behaviours

The output panel should behave in the same way as the code panel with syntax highlighting.