This tutorial shows you how to make a tabbed interface menu using a Dynamic Panel with multiple states and the "Set Panel State(s) to State(s)" action.

Dynamic Panel Tutorial

Tab Control

Tabbed Browsing Menu

The dynamic panel is now your friend. We hope you're ready to enjoy the rest of your rich, interactive life together.

First, open TabControl.rp and open the "Tab Control" page.

Select all of the widgets by doing a click drag.  Then, right-click on the selection and choose Convert > Convert to Dynamic Panel to move all the widgets into a dynamic panel.

Label the dynamic panel "Tab Panel"

Next we are going to add two more states to our newly created dynamic panel.  Right click on State1 in the Dynamic Panel Manager and select "Add State" twice. There should now be a total of three states in the dynamic panel.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

(AxureTabControl.zip)

This zip file contains the RP file needed to complete this tutorial

Open State1 by double-clicking the state in the Dynamic Panel Manager.

Notice the light blue and dark blue tabs at the top of the wireframe.  Add a case to the OnClick event of each tab to set the Tab Panel to its associated state using the "Set Panel State(s) to State" action. OnClick of Tab 1 sets Tab Panel to State 1, OnClick of Tab 2 sets Tab Panel to State 2, and so on.

While in State1, select all of the widgets and copy them (Ctrl+C). Then, paste them into State2 and State3.

Edit the text in State2 and State3 so each state has unique content.

With State2 open, select Tab 1 and open the Format Painter (the paintbrush in the main toolbar). Click Copy to copy the formatting of Tab 1 to the Format Painter. Then select Tab 2 and click Apply in the Format Painter to apply the formatting. Next, copy the formatting from Tab 3 to Tab 1.

Open State3, and repeat the steps with the Format Painter, except this time, make Tab 3 the lighter blue color.

Generate your prototype and test out your interactive tab control.

Step 1: Convert to dynamic panel

Step 2: Add states

Step 3: Add interaction to set panel to state

Step 4: Copy the widgets to the other states

Step 5: Edit tab colors on State2

Step 6: Edit tab colors on State3

Next: Custom Tooltip Tutorial

Back to Dynamic Panels (Basic)