© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

 

TAB CONTROL

Make a structure in which clicking a tab reveals the contents of that tab.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: GETTING STARTED

Open the page named "Tab control" in the training document.


The page contains two tab widgets, "Tab 1" and "Tab 2", each of which already has a Selected interaction style. (Check out our Interactive Button tutorial to learn more about configuring interaction styles.)


The page also has two groups, "Body 1" and "Body 2". "Body 1" includes the contents of "Tab 1" and "Body 2" includes the contents of "Tab 2".

STEP 2: MAKE DYNAMIC PANEL

Right click the "Body 1" group. Choose the option "Convert to Dynamic Panel."


Double-click the new dynamic panel to open the Dynamic Panel State Manager.


Click the green "+" icon to add a state.


Double-click the name (State2) of the new state to open it for editing.


Return to the "Tab control" page. Right-click "Body 2" and choose "Cut".


Return to the “State2” tab and paste "Body 2".

STEP 3: ADD INTERACTION TO "TAB 1"

Select "Tab 1" and double-click "OnClick" in the Properties tab to add a new OnClick case.


In the left column, click the action "Set Panel State".


In the "Configure actions" column, choose the dynamic panel you created.


At the bottom of the column, use the dropdown labeled "Select state" to choose "State1" (it should be selected by default).


Return to the left column and click the action "Set Selected/Checked."


In the right column, click the checkbox "This Widget".


Click "OK" to close the dialog.

STEP 4: REPEAT FOR "TAB 2"

Repeat the steps above for "Tab2". When you add the "Set Panel State" action, make sure to choose "State 2" this time.

STEP 5: MAKE A SELECTION GROUP

Selecting one tab should deselect the other, so we’ll need to add the tabs to a selection group. In a selection group, only one of the group’s widgets can be selected at a time. When one of the widgets is set to selected, the other widgets in the group are automatically deselected.


Select both "Tab1" and "Tab2".


In the Properties tab, locate the "Selection Group" field. Type "TabGroup" in the field to create a new selection group and add the widgets to it.

STEP 6: PREVIEW

Click Preview.


Try clicking the tabs to switch between them. The clicked tab changes to its selected state and the dynamic panel changes to the corresponding state.

MORE RESOURCES

CORE TRAINING

TUTORIALS