TABBED BROWSING MENU
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.
The downloadable RP file includes an example of the finished product. In this tutorial we'll build the example from scratch.
Add a rectangle widget to the design area. Change the shape to the rectangle with no bottom border by right clicking and selecting "Select Shape > Top".
Click the Fill Color button in the toolbar and set the opacity to 0% to make the rectangle transparent.
To differentiate between the default and selected style of the tab, click on Selected in the Properties tab. Place a check in the box for Fill Color and then click on the fill color drop down arrow to open the format painter.
In this example, we set the fill type to Linear Gradient, selected a blue for the color on the right slider.
© 2002-2015 Axure Software Solutions, Inc. All rights reserved. Axure Ⓡ is a registered trademark of Axure Software Solutions Inc.
Drag another rectangle widget onto the design area and line it up underneath the tabs. Then, right click the new rectangle and select "Convert to Dynamic Panel".
Make sure that the bottom of the tabs overlap the top of the dynamic panel by right clicking on the panel and select "Order > Send to Back" and then move it up one pixel using the keypad.
In the Widget Manager, label the panel TabDynamicPanel1. Duplicate the state twice for a total of three states. By default, the states will already be labeled as State1, State2, and State3.
Enter the text on each of the rectangles Pane 1, Pane 2, and Pane 3.
Select Tab 1 and edit its OnClick event. First, add the “Set Selected,” action. Place a checkmark in the checkmark box for Tab1 (Shape). Leave the “value” drop down menu on the default “True” option.
Second, add another action for “Set Panel State.” Check the box for TabDynamicPanel1 to select it and set it to State1 in the, “Select the state,” drop down menu.
Repeat these steps for both the second and third tabs. Make sure you select Tab2 and State2 for the second tab, and Tab3 and State3 for the third tab.
Set the first tab as selected whenever the page loads.
Add a case to the page’s OnPageLoad event in the Page Interactions tab. Select the action, “Set Selected,” and check the box for the Tab1 (Shape). Leave the default option as, “true,” and click, “OK.”
Step 1: Format a rectangle into a tab
Step 2: Edit the
tab's selected style
Step 4: Add rectangle, convert to Dynamic Panel
Step 5: Duplicate
states and edit text
Add the OnClick events
Step 7: Set the active
Preview your prototype and test out your interactive tabs.
Step 8: Preview prototype
Now, copy and paste the rectangle twice so you have a total of three identical tabs and line them up.
To make only one of these tabs selectable at a time, select them all, and enter a name into the "Selection Group" field in the Properties Pane. Name the selection group Tabs.
Label your tabs in the Widget Properties pane by selecting each one and name them Tab1, Tab2, and Tab3. Finish labeling them by typing in Tab 1, Tab 2, and Tab 3 on the tabs themselves.
Step 3: Copy/Paste, add to selection group, name
DYNAMIC PANEL TUTORIAL
THE ROUND UP
MORE DYNAMIC PANELS ARTICLES ::