Axure-dynamic panel (basic)-prototyping tools axure learning-Section 2.1

Hide and show with dynamic panel (basic)

Dynamic panel allows you to hide, display, exchange, and move wireframe content. This topic describes the basic functions of dynamic panels to hide and display content. For more advanced usage, click dynamic panels (advanced)
Tutorial video: Download MP4 format

Dynamic panels Overview

A dynamic Panel widget is a panel with a heap of status or graphics containing other widgets. The Panel can be hidden, displayed, and moved. You can set the current visual image to dynamic. The dynamic panel allows you to display the function in your prototype and drag and drop the function. For example, custom prompts (custom tooltips), lightboxes, and Tab controls ). As a general rule of axure RP, you can choose to use a dynamic panel (dynamic panel) when you want to display, hide, modify, and move objects in your prototype ). You will find that in your prototype toolbox, it will become the most commonly used tool.

Dynamic Panel states

A dynamic panel can have one or more States, and each State can be a graph containing different widgets. At the same time, only one status of the dynamic panel can be displayed. In interaction, you can hide or display the panel, and set the current status of the panel.
In wireframe, you can drag and drop to increase and set the Panel size. You can also reset the size through the handle. On the wireframe page, the size of the dynamic panel component determines the range in which you can see the status.
Tip: If a widget already exists in your wireframe and you want to set it as a dynamic panel, there is a very simple operation-you can easily set it by right-clicking the menu "convert to dynamic panel" popped up by the component. This operation automatically generates a new dynamic panel and sets this part to the first State.

*Add and design dynamic Panel states

By default, the dynamic panel is empty, so you need to set the content (widget) to the Panel status. To do this, double-click the Panel to open the "dynamic panel State Manager" dialog box.
In the dialog box, you can add, delete, re-sort, and open the editing status. The first status is the default status of the dynamic panel.
Select a status in the list box and click "Edite state" to open the edit Status dialog box.

Blue indicates that the contour is being edited. This will display the size of the dynamic panel, and the blue outline is also the border where you can see the status. By dragging widgets, you can design the Panel status, just like dragging on any wireframe.
Scrollable area: Right-click the Panel and choose "edit dynamic panel"-> "show scrollbars as needed" to add a scroll bar to the dynamic panel. If the widget you add exceeds the boundary of a panel state, the scroll bar will appear in the dynamic panel of the prototype.

* Hide content by default

The dynamic panel can be set to hidden by default. To do this, right-click the Panel in wireframe and choose "Edite dynamic panel (edit dynamic panel)"> "set hidden.
Hiding the panel content changes the blue color of the widget Surface Contour to yellow.

Dynamic panel Manager

The dynamic panel Manager (dynamic panel manager) provides the addition of the status of all dynamic panels, which is another way to manage dynamic panels. When you use many dynamic panels on a page, this dialog box is very useful and you can quickly navigate to the dynamic panel you want to edit.

At the same time, the Panel provides the function of hiding the dynamic panel in wireframe editing (the small box on the right is used to hide the Panel .). This facilitates the selection of widgets that are covered by the Panel ).
The dynamic panel in the motherboard also has this option.
If the management panel is not in the view, you can re-open and display the panel from "View-> dynamic oanel manager.

*Using the dynamic panel Manager

Select the name or status of a dynamic panel, and click "add state" in the toolbar of the Management Panel to create and delete the status. Right-click the name or status of a dynamic panel and choose text menu.
Double-click a status to open the editing status. You can also select a panel name or status and click "edit all States" to open the status of all dynamic panels. This option is also available for right-click dynamic panel names.

On the Management Panel, click the blue square on the right of the Panel name to hide the dynamic panel in the wireframe panel. Right-click the Page name and select "hide all" to hide all dynamic panels on the page. This is useful when the dynamic panel covers other parts.
Note that the hidden content here is different from the default hidden content of the dynamic panel.

Interacting with dynamic panels

Once your wiraframe has a dynamic panel, you can increase normal interaction by adding an event case and selecting an action from the list. Operations are provided for dynamic panel interaction. Some available operations include: Set panel State (s) to state (s), toggle visibility for panel (s ), show panel (s), move panel (s), hide panel (s), bring panel (s) to front, send panel (s) to back.
We will describe some basic interactions, including displaying and hiding panels, setting panel status, and setting the panel to the beginning. Events for moving dynamic panels and dynamic panels will be discussed in advanced dynamic panels.

* Set dynamic panel state

Create a dynamic panel with multiple States and use the "set panel State (s) to state (s)" operation to set the Panel to a specific State. In the case editor dialog box, select action in the list ). When you select a panel, you can select the status you want to set (in the select the satate drop-down box ). You can set the status of Multiple Dynamic panels in the same operation.
The operation is used in the mode. For example, when you click a tab or a button or drop-down box to change the content of a region. (See the following example)

* Show & hide/toggle visibility for panel

You can use show panel (s) and hide panel (s) to show and hide the content in the current status of the dynamic panel. In the "editor case" dialog box, select operations and select the dynamic panel on the page from the list. Setting dynamic Panel labels is a good habit, which facilitates panel search. You can hide or display multiple panels in the same operation.
You can use the toggle visibility for panel (s) operation to convert the display and hiding of the Panel.
This operation is often used to dynamically display and hide error messages. (See the following example)

* Move Panel

The "Move panel (s)" operation allows you to dynamically move a panel content to a specific pixel distance or to a specific location on a page. Set the position where you want to move the Panel and add an interactive case to the event that triggers the Move Panel. (For example, add a use case for moving the panel in the onclick event of a button)
In the case editor dialog box, select the move panel (s) operation and select the panel you want to move. At the bottom of Step 4 (step 4), you can set the pixel position for the Panel to move or set the Panel to a fixed position.
This operation can be used for prototype and extended area. The content of the lower layer is displayed or hidden. (See the example below)

* Bring panel to front/send panel to back

If your dynamic panel is hidden by other components in the prototype and you need to display it on the top, you can use the "Bring panel (s) to front" operation. This operation will display the Panel on other components. In the "case Editor" dialog box, select an operation and select the panel to be operated on. You can operate multiple panels in the same operation. "Send panel (s) to back" has the opposite effect.
In the "light boxes" and custom pop-up menus, this operation is required in the Custom prompt. Especially when the Panel is on the background page of the motherboard. (See the example below)

* Animation and transition effects

When you move the panel, you can have an animation effect. When you move the panel, you can also display and hide the panel with a gradient effect.
Warning These animation effects may be easy in prototype design, but development may be difficult to implement.
When you implement the "Move Panel" operation, you can choose rotation, bounce, or other specific animation transformations.
In the implementation of "show panel ". You can select a gradient animation when using "Hide panel" or "toggle panel.

When you use the "set panel state" operation to set the Panel state, you can also choose gradient or slide effects.

Dynamic panel tutorials

* Show Hidden panel tutorials

This example uses the dynamic panel and uses the show panel (s) operation to dynamically display a hidden error message.
Go to the "show hidden panel tutorial (original)" Example

* Tab control tutorial

This example uses a dynamic panel with multiple states and the "set panel State (s) to state (s)" operation to set the content displayed by the tab control.
Go to the "tab control tutorial (original)" Example

* Custom tooltip tutorial

This example shows how to display and hide the custom prompts of a dynamic panel when moving the cursor over and out of a widget.
Go to the "Custom tooltip tutorial (original)" Example

* Flyout menu tutorial

This example describes how to use a dynamic panel to create a custom pop-up menu.
Go to the "flyout menu tutorial (original)" Example

The round up

Have you understood the basics of dynamic panel? Good, continue to learn more "dynamic panels (advanced dynamic panel functions)"
Still need help? EnterForumOr send an emailSupport@axure.com

Address: http://www.axure.com/dynamic-panels-basicAxure official address: http://www.axure.com/PS: translation is for a more thorough understanding Article And share. It is generally in English. Please speak it up.The copyright is owned by the company at the original address.