© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.
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" onto the canvas. Then, move it to (0,0).
STEP 3: ADD INTERACTION TO "TAB 1"
Back on the "Tab control" page, select "Tab 1" and double-click "OnClick" in the Properties of the Inspector pane tab to add a new OnClick case.
In the left column of the Case Editor, 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 of the Inspector, 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
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.