Axurerp7.0 basic tutorial series parts details dynamic panel dynamicpanel

Prototype library website-Original release of lecturer Jin Wu, which can be freely reproduced. Please indicate the source!

AxureOfficial Chinese website: www.axurerp.cn

 

Axurerp7.0 parts details

Dynamic panel dynamicpanel

Dynamic panel Overview

Dynamic panel(Dynamic panel)

A dynamic panel is a container that can contain other components in layers or states. you can compare a dynamic panel to an album. Each interlayer of the album can be loaded into other parts, and each interlayer and its parts can be hidden, displayed, and moved, you can also set the visible status of the current interlayer dynamically. these features allow you to demonstrate effects such as custom prompts, lightbox, tag control, and drag and drop in the prototype. in practice, you will find that the dynamic panel is the most used tool in the prototype design.

Dynamic panel statusDynamic Panel states

A dynamic panel can contain one or more States, and each State can contain multiple parts. the status of a dynamic panel can only be viewed once at the same time. with interaction, you can hide/display the dynamic panel and set the visibility of the current dynamic panel status.
The best way to add and adjust a dynamic panel is to convert it to a dynamic panel ". select the part you want to put in the dynamic panel status, right click → select convert to dynamic panel. this action will automatically create a new dynamic panel and place the part you selected into the first State of the dynamic panel.
Alternatively, you can drag a dynamic panel part to the job area and adjust the size by the tip of the top, bottom, and left parts. The size of the dynamic panel in the job area determines the boundary size of the part contained in the status.

 

Edit dynamic panel status

Dynamic panel area

When editing the dynamic panel, you will notice a blue dotted line outline, which means that you can only see content within the blue dotted line outline range in the dynamic panel.

Edit the widget in the dynamic panel status, just as you drag the widget on the right.

 

Adjust the dynamic panel size to fit the content

If the part size you added exceeds the dynamic panel profile range, you may need to add a scroll bar or adjust the dynamic panel size to fit the content.

See the picture on the right

Add dynamic panel status

Adding dynamic Panel states

Dynamic panel default Style

By default, the status of the dynamic panel is empty, so you need to add content (parts) to the dynamic panel. In this step, double-click the dynamic panel in the job area,

Alternatively, double-click the dynamic panel status in widget manager.

In the pop-up dialog box, you can add, delete, rename, copy, or open and edit the dynamic panel status. The first status is the default status of the dynamic panel.

Double-click a status to open this status for editing.

Dynamic panel Interaction

Interacting with dynamicpanels

After you drag a dynamic panel component into the job area, you can select an event in the event list as usual and add a use case to add an interactive effect to the dynamic panel.
The available actions of the dynamic panel include: Set the Panel status and set the Panel size.

Here, instructor Jin Wu has prepared a dynamic panel high-level explanation to discuss the dynamic panel event dynamic panel events.

Set dynamic panel status

Set dynamic panel state

Multi-state dynamic panel

 

Create a multi-state dynamic panel and use the set panel Status action to set the dynamic panel to the specified status.
Select action in case editor and select status in the list of pages.

In this action, you can set the status selection of Multiple Dynamic panels at the same time.

 

This action can be used to switch the label status, change the content on the button, or select from the drop-down list.

Show or hide a group of Parts

Hide/show groups of Widgets

Hide/Display Dynamic panel

Use hide/show actions to show or hide the current status of the dynamic panel. In the Case editor dialog box
Select action in the action list.
Naming all parts in the job area is a good habit, which helps you find the parts you want to operate.
You can select multiple panel settings to hide/display in one action.

Tip: Use the toggle action to switch between display and hide panels.

 

 

 

Dynamic panel status settings

Setting dynamic Panel states

Dynamic panel options

Set dynamic panel properties

Enter/ExitAnimationAnimatein/out:Replaces the transition effect of the dynamic panel status (for example, fade-in and fade-out, and slide-up .)

Display Panel (if hidden)Show if hidden:If the specified dynamic panel is hidden, selecting this option will display the dynamic panel while setting the dynamic panel status.

Expand/Collapse partsPush/pull:If this option is selected, the parts under or on the right of the dynamic panel are automatically moved. This is mainly used to expand and collapse the content.

Previous/next status

Next/previous

Dynamic panel Loop

You can set the status of a dynamic panel to the previous or next one. this means that if the current status of your dynamic panel is 1, this action (next) will set the dynamic panel to status 2, so as to switch the status in order;

The previous is the opposite.

 

LoopWrap from last to first:

If this option is selected, the dynamic panel status can enter a wireless loop, similar to the infinite slideshow of the magic lamp advertisement. When the last status is reached, the Panel will be set to the first status to enter an infinite loop.

Cycle IntervalRepeat every:This option adds an interval (1 second = 1000 milliseconds) to the two status switches. This option is usually used for automatic carousel images.

 

Stop Loop

Stop repeating

Dynamic panel stop Loop

When a dynamic panel is set to automatic cycle, you can use the stop loop option in the select status drop-down list to stop the automatic cycle of the dynamic panel.

To continue the stopped loop, use next/previous and check the loop option to continue the loop in the stopped state.

Note: It is usually used when the mouse is hovering over the auto-Carousel advertisement.

Value

Dynamic Panel attributes

Dynamic panel properties

Dynamic Panel attributes

 

• Adjust the size to fit the content

 

The dynamic panel can be adjusted based on the Content size of its internal panel to fit the content.

In addition to the above method, you can double-click the small handle status on the top, bottom, and left of the dynamic panel to adjust the size to fit the content.

Note: When parts in the dynamic panel are added or deleted, the dynamic panel automatically changes the size.

Add a scroll bar to the dynamic panel

 

• Add the scroll bar adding scrollbars

 

Use the scroll bar to add scrollable content to your dynamic panel. In the dynamic panel properties panel, select the scroll bar drop-down menu and select the display mode of the scroll bar.

Note: To make the scroll bar display normally, the content in the dynamic panel state must be larger than the boundary outline of the dynamic panel,

You cannot select or adjust the size to fit the content.

 

Fixed to Browser

 

• PIN to Browser

Fixed to the browser, allowing you to create fixed/pasted elements, such as the page header, footer, or sidebar. These elements will stay in a fixed position when you scroll through the window.

Select dynamic panel, click pin to browser in the dynamic panel properties panel, and select pin to browser in the pop-up dialog box, select horizontal and vertical as needed, and enter the specified margin if necessary.

Departure mouse interaction style

 

 

• Trigger Mouseover and mousedown styles

If the widget in your dynamic panel is set to the interaction style when the mouse is hovering and the mouse is pressed, if this option is selected, when the animation interacts with the dynamic panel (hover and Press) changes the style of the internal part.

 

Dynamic panel100%Width

 

• Dynamic panel background 100% x 100% wide

When combined with the background color or image of the dynamic panel, the 100% width will make your dynamic panel background color or image span the entire browser width.

In the dynamic panel properties panel, select 100% in width, and then open a dynamic panel status to edit. In the middle of the bottom panel, you will see the Panel status format panel state formatting tag.

Here you can edit the dynamic panel background. If 100% is selected, the background will be extended to the width of the entire browser in the browser.

Dynamic panel tutorial

Dynamic panel tutorials

• Image carousel photo movie usel

• Pop-up menu flyout menu

• Accordion Control

• Label control tab Control

• Lightbox Effect

 

Axurerp7.0 basic tutorial series parts details dynamic panel dynamicpanel