UI/UX Design: TAB CONTROL Using Axure RP 8

How to create Tab Control using Axure RP 8

Step - 1 - First open New file in Axure RP 8

Step-2 - From Libraries select Rectangle shape and set height and width as per given below image

Step - 3 - From Libraries select Heading H1 and horizontal line

Step - 4 - From Libraries select Image (double click the image to change image from computer) and select the Paragraph and Place near to image (as aligned way).

Step - 5 - Select all (rectangle,image,heading,paragraph) and right click and select "Convert to Dynamic Panel"

Step - 6 - Converted to Dynamic Panel now Name it as "Tab_Content"

Step - 7 - After converting to Dynamic Panel "Outline Page " see there is State, now Right click on State and select Duplicate State and do twice, Now you have State 1 , State 2 , State 3.

Leave the State 1 as it is . next step you have to click on State 2 and State 3 and Edit the Content.

Step - 8 - Click on State 2 , it will open in new tab and Edit the content and image

You can set the Font color, Background color, font-size, font-style as per below image.

Step - 9 - Now From Libraries select the Rectangle shape and make it small size (looks like tab), make it 3 because we have 3 states.

Step -10 - Select each tab Rectangle and Name it as Tab 1,2,3 respectively.

Step - 11 - Select all tab (rectangle) and Right Click and select the "Selection Group"

Step - 12 - Name the Selection Group as Tab_Control

Step - 13 - Now Name to each Rectangle (tab)

Step - 14 - Select all rectangle (tab) and Right Click select "Interaction Styles"

Step - 15 - In Interaction Style Window select "MouseOver" Tab and checked to Fill color and Pick the color

Step - 16 - In Interaction Style Window select "Selected" Tab and checked to Fill color and Pick the color

Step - 17 - Select each Rectangle (Tab) and Inspector : Page - Properties "double click" on OnClick and Add case

Step - 18 - In Case Editor

> Click to add actions > Widgets > Set Panel State , Configure actions > checked the set Tab_content , Selected State > State 1 , animation In > none , animation Out > none , Press OK

Step - 19 - In the same case Editor

> Click to add actions > Widgets > Set Selected/Checked , Configure actions > checked the Tab 1(rectangle) , Set selected state to , Value > true , Press OK