Switch the Axure Tab and switch the axuretab

Switch the Axure Tab and switch the axuretab

In the past few days, when using Axure to draw a prototype chart, you need to switch the Tab. However, Axure does not have any components similar to the Tab control, therefore, the Dynamic Panel in Axure can be used for implementation.

This article uses Axure7.0, which is already in Chinese, as an example. If you are not good at English, you can perform Chinese-based operations first (note the versions when you are in Chinese. Different versions and Chinese-based files are slightly different ).

The specific implementation steps are as follows:

1. Drag a dynamic panel component into the page;

2. Add several states to the dynamic panel component;

Operation Method: double-click the dynamic panel and click the plus sign on the left to add the status. Here, change the names of the four added statuses to "Tab 1, Tab 2 ......"

Click OK. The dynamic panel has four statuses, each of which corresponds to one tab page:

3. Edit the page content of each status (Tab) (you can edit the public content in each tab in Tab 1) and double-click Tab 1 to go to the editing page of the status, drag a rectangle (as the main panel of the tab) and four image controls to the page:

Here, we made four images as Tab headers to display the results. The four pictures have no borders at the bottom:

After uploading the four images, adjust the position of the image and the rectangle (so that the upper border of the rectangle blocks the bottom border of the four images) and the level (place the rectangle on the top) until the effect is:

Next, place the hierarchy of Tab 1 to the top layer. in order to identify, drag the content to be placed in Tab 1 into the rectangle (here, drag a single line of text ):

In this case, Tab 1 is displayed, and Tab 2, Tab 3, and Tab 4 are all modified according to this method. The content in the rectangle of each tab (that is, the status) is the body content to be displayed for each tab.

4. Set the dynamic jump between tabs:

In Tab 1, click picture Tab 1 to add a mouse click event for it.

The new action is "set panel status" under the dynamic panel, and the action is to set the status to Tab 1, such:

In this case, you can click "Tab 1" to switch to the panel of Tab 1, and set the other three buttons in the same way.

Tips

The four tabs in the previous example are the four states of the dynamic panel. These statuses have some public content, such as the four buttons of the tab (that is, the four pictures in the previous example) click events corresponding to the buttons. To save time and efficiency, you can create a tab content, and then copy the public content of this tab to other tabs, in this way, the switch between tabs is not properly adjusted, and the switch will jump back and forth (when the content is copied from one place to another in Axure, the attributes, events, coordinates, and other attributes of the content remain unchanged ).