Component > Version Switcher

It should be possible to show a version switcher on a code snippet. This could be automatically displayed if the component detects more than one version of the example in the markdown/schema used to describe the code snippet. If one example is included, there should be no version switcher control displayed.

Anatomy

Version switcher

Usage

Rather than repeat lots of similar (or grouped) code snippets, this component allows the author to offer switchable content - for example, platforms or API versions.

States

  • Hidden: The version switcher is not shown if only one code example is present.
  • Visible: The version switcher is shown, and displays the currently selected example title
  • Focused: The control is highlighted using the Vanilla standard focus highlight
  • Opened: The select menu is opened, showing the possible choices
  • Selected: The user has tapped a selection and the relevant code snippet is displayed

Behaviours

A Vanilla standard select menu which allows the user to pick from a list of items. Immediately on selection, the relevant code snippet is displayed.