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".

 

Set the default color by clicking the Fill Color button in the toolbar. Make sure to set its transparency to 100%.

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

Axure Share

Forum

Manage Licenses

Home

Features

Community

Learn

Support

Company

Download

Buy

Contact

Privacy

Legal

Sitemap

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

u63_start u63_end u63_line

Patents

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

u146_start u146_end u146_line
u148_start u148_end u148_line
u150_start u150_end u150_line
u152_start u152_end u152_line
u154_start u154_end u154_line
u156_start u156_end u156_line
u158_start u158_end u158_line

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

THE ROUND UP

DOWNLOAD

u181_start u181_end u181_line

MORE DYNAMIC PANELS ARTICLES ::