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.

Features

Learn

Community

Company

Buy

Download

AxShare

Forum

Manage Licenses

Blog

Home

Features

Community

Learn

Support

Company

Download

Buy

Contact

Privacy

Legal

Sitemap

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

u65_start u65_end u65_line

Patents

FR

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

Step 6:

Add the OnClick events

Step 7: Set the active

tab OnPageLoad

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

Tab Control

u151_start u151_end u151_line
u153_start u153_end u153_line
u155_start u155_end u155_line
u157_start u157_end u157_line
u159_start u159_end u159_line
u161_start u161_end u161_line
u163_start u163_end u163_line

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

THE ROUND UP

DOWNLOAD

u186_start u186_end u186_line

MORE DYNAMIC PANELS ARTICLES ::