Axure RP Prototype Tab tab

Purpose

This article is a summary of the Tab tab design for the Axure prototype design, with the following effects:

Step1 space Zone drag into rectangle

Step2 Rectangle area drag into dynamic panel

STEP3 Dynamic Panel Add two states, plus the default one, named Tab1, TAB2, TAB3 (here only 3 tabs for example)

Step4 Open Tab1 (TAB2 and tab3 the same steps), drag into the rectangle, resize as tab header, input text Tab1, right mouse button adjustment upper half-width

SETP5 follow Step4 and make another two tab header

Step6 drag into rectangle, as the Content section of the tab, enter what each tab page needs to display at a time

Step7 adds an OnClick event to each tab. Select Tab1, select the set panel state to state,select the TAB1 (the other two steps)

STEP8 Follow step steps to add the OnClick event to the other two, and then process the TAB2 and TAB3

STEP9 to deal with some details. See no, when we click on each tab tab, the line of the label's head has not changed and we have to "press" the line of the tab tag head that is clicked. The way to handle this is to select the point

Click the tab tag header, right-click Order->brint to Front

STEP10 add color to your tab tag and let them move. Select the label head and the color fill area to select a linear gradient. Choose what color, whatever you want