Creating a Tabbed Panel

A Tabbed Panel

A tabbed panel is a collection of links and associated content. The links appear as tabs and the content is displayed within panels. When you click a tab, its associated panel is displayed and all other panels are hidden. Therefore, a tab panel is a convenient and compact way to display information.

In ProtoShare, there are three main steps involved when creating a tab panel: creating the tab strip, configuring the tabs, and adding the tab content. There’s no limit to the number of components you can associate with a tab. You can create a complex form with many components, or a simple content display with one text component. To learn more about states, refer to Using States.

For example, suppose you want a horizontal tab panel with three tabs named “Planes“, “Trains”, and “Automobiles”, and clicking each tab displays unique content using a text component.

Create the Tab Strip

  1. Drag a state-based Navigation component onto the canvas from the Palette.
  2. Style the links to look like tabs. A common practice is to use a thin border on each item, and to turn off the bottom border for the “active” tab.

Configure the Tabs

State Inspector

By default, the state-based navigation has three tabs: “Item 1”, “Item 2” and “Item 3”.  These are based off of the values of the attached state. You can change the number and names of the values by editing the state:

  1. Select the navigation component, and click the Edit State button in the Inspector.
  2. In the Values field, enter the names of the tabs, one per line.

Add the Tab Content

Visibility State Value Picker

Repeat these steps for the each tab, clicking on the appropriate tab in step 1, and selecting the corresponding value in step 7:

  1. Switch to Test mode and click on the first tab in the tab strip to be sure that the associated value is active. Switch back to Edit mode.
  2. Drag a paragraph of text from the Palette and drop it on the canvas below your tab strip.
  3. Resize the text component to the desired size of your tab panel content.
  4. Style the component to look like the body of a tab. A common practice is to use the same border you applied to the tab strip.
  5. Double-click the component to edit its content.
  6. In the Inspector, click the Only When field, below Visibility.
  7. Select the value corresponding to the first tab, “Planes”, and save your changes.
    • Choosing this value will make your paragraph of text visible only when this value is active.

Test You Work

Switch to Test mode and click on the tabs and verify that the correct content appears when each tab is active.