Axure tabs widget

In Axure RP Pro two important functionalities like ‘masters’ and ‘dynamic panels’ help us create rich interactions really efficiently. In some cases they don’t work really well together, I tried to find a work-a-round which I’m sharing with you in a tab widget form today.

Designers using Axure RP Pro will quickly discover that it’s really easy to create widgets as a master in order to efficiently reuse those items. Another great functionality in Axure are dynamic panels, they make it easy to create on-screen interactions like tabbed widgets or let you change the status of an item easily. Complex prototyping is made easy this way.

Masters and dynamic panels don’t cooperate

Unfortunately masters and dynamic panels don’t always work very well together. For instance, it’s not possible to put an interaction in a master in order to change the status of a dynamic panel which is outside that master. You’ll either have to place the dynamic panel inside the master, or put the interaction in another seperate element.

I think I found a way to be able to use masters inside a widget and at least make it seem like the elements within the master affect the status of the dynamic panel.

Why would we want this?

you only need to change the selected tab content manually in each layer.

Create a tab master

Begin a new master and place all the desired tabs inside it. Make sure all the tabs are in an unselected state, don’t put actions on the elements. Put a solid line on top of all the tabs. You can then close the tabs master.

Create a dynamic panel

Start a new dynamic panel and make it the size you’ll ultimately want it to be. Add as many layers to the panel as you have tabs to click on. Fill every layer with the tabs master and add the content you wish every tab to contain. Finally add an extra tab to each layer with it’s selected state (probably white). Again, don’t add any actions to those tabs. Okay, we’re done here.

Create a master for the tabs

Make a dynamic panel for tab content

Add dynamic panel to a new master

Add the dynamic panel to a new master

Close all layers of the dynamic panel and start a new master. Drag the dynamic panel into this new master. Now add a box object to the master. Change it’s background color to transparent and remove the border. Put one of these transparent objects on top of each tab. Now change the onClick status of every transparent object to make the dynamic panel change to it’s corresponding tab content.

4 Replies

Chris
September 30th, 2009

In the last paragraph you state: “Now add a box object to the master. Change it’s background color to transparent and remove the border. ”
Would it be more efficient to use an image map region instead? You wouldn’t have to fiddle with the background color and border.