DYNAMIC PANEL WIDGETS
© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.
ELEMENTS WITH MULTIPLE STATES / LAYERS
Dynamic panels are useful when a portion of your diagram has several different possible contents, such as an image slideshow or auto-rotating carousel.
Dynamic panels are the only type of widget that can be dragged with a mouse movement. Place a draggable widget in a dynamic panel to prototype this effect.
Dynamic panels fixed in place using the "Pin to Browser" feature will not scroll with the rest of the page in the HTML output, making them good for always-visible content like sticky headers, sidebars, and corner banners.
CREATING DYNAMIC PANELS
There are two ways to add a dynamic panel to a project.
FROM THE LIBRARIES PANE
There's an empty dynamic panel widget in the Default widget library. A dynamic panel dragged onto the canvas from the Libraries pane will start with just a single, empty state.
BY CONVERTING WIDGETS
Add one or more widgets to a page, select them, right-click, and choose "Convert to Dynamic Panel" to make a new, one-state dynamic panel that contains the selected widgets. The widgets contained inside the dynamic panel will have been moved, not copied—they will no longer be on the base page.
LOCATION AND SIZE
To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.
When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging.
Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or in the Inspector’s Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.
When you manually set the size of a dynamic panel on the canvas, it applies to all panel states and disables the “Fit to Content” setting (see below). Using "Fit to Content", the size of the panel can vary to fit the contents of the current state.
Each dynamic panel state can have a background color or background image. In the Style tab of a state, use the "Back Color" color picker to add a background color or add an image by clicking the "Import" button in the "Back Image" section. You can also choose the position of the background image within the panel state and whether the image should stretch or repeat. The background color or image will show anywhere inside the dynamic panel state that is not covered a by a widget.
You can also edit the background styling of the first state of a dynamic panel from the diagram in which it is located. Select the panel and switch to the Style tab of the Inspector.
"FIT TO CONTENT"
Dynamic panels can be set to "Fit to Content", which means that each state will be sized to fit the contents of that state.
To toggle this setting, check the "Fit to Content" checkbox in the Inspector's Properties tab. You can also double-click any of the handles on a dynamic panel to turn on "Fit to Content". To disable it, double-click the handles again or resize the panel by either dragging or using the widget width and height fields.
HIDING ON THE CANVAS
You can hide dynamic panels from view on the canvas to get them out of the way when working on other parts of your diagram. Dynamic panels hidden in this way will still be published and seen as part of the HTML output. To hide a dynamic panel from view, click the box to the right of the panel's name in the Outline pane. To restore it to view, click the icon of an eye with a slash.
Dynamic panels can have contents outside the visible area. You have the option to add scrollbars to the dynamic panel so that it's possible to scroll to see all the contents of the state. In the Properties pane, use the "Scrollbars" dropdown to choose between "Both as Needed," "Horizontal as Needed," and "Vertical as Needed." In all cases, the scrollbars will not be shown if there is no content outside the panel state's visible area.
TRIGGERING MOUSE INTERACTION STYLES
Many widget types can have interaction styles. Sometimes, you may want all of the widgets in a panel state to show their interaction states together. In this case, use the checkbox control in the Properties tab labeled "Trigger mouse interaction styles". When the user interacts with any part of a dynamic panel (including the empty space between widgets, if there is any), the interaction styles for all widgets will be triggered.
THE "SET PANEL STATE" ACTION
Create a dynamic panel with multiple states and use the “Set Panel State” action to set the panel to a specific state (e.g. via a case on a button's OnClick event). In the Case Editor, select the action and choose from the list of panels on the page. Once you choose a panel, you can select the state you want to set it to. This is useful for tab controls and slideshow / carousel "back" and "forward" buttons.
A "100% wide" dynamic panel is used to make a color or image span the entire width of the browser. Set the background color or background image of a dynamic panel state. Then,
select "100% Wide (browser only)" in the Properties tab. When you view the HTML output in the browser, the background color or image will extend the full width of the browser. If the browser window is resized, the width of the dynamic panel will be automatically adjusted.
A dynamic panel is a container that holds other widgets in layers, or "states". A dynamic panel can have one state or many, with only one state visible at a time. The currently-visible state can be set dynamically, using the "Set Panel State" action. Each state has a visible area but can also include widgets that are outside the boundaries of the visible area.
THE DYNAMIC PANEL STATE MANAGER
Double-click a dynamic panel on the canvas or in the Outline to open the Dynamic Panel State Manager. Click the green "plus" icon to add a new state. You can also use the "duplicate" button to create a new state that is identical to another state in the dynamic panel.
Use the blue arrow keys to reorder states by moving them up and down.
The "Edit State" button opens a state for editing, as does double-clicking on a state's name. You can use the "Edit All States" button to open each state of the panel. The red "x" icon deletes the currently selected state.
The quickest way to add a link to a dynamic panel is to select the widget and click "Create Link" in the Interactions tab. A list of pages in the project will appear. Click on the name of the target page to create the link and close the dialog. Learn more about creating interactions here. An interaction added to a dynamic panel will apply across all states of the panel. You can alternatively add interactions to widgets inside a panel state.
PINNING TO THE BROWSER WINDOW
The "Pin to Browser" option fixes a dynamic panel in place relative to the browser window, which means it won't move when the page is scrolled. In the Properties tab, click "Pin to Browser" to open the settings dialog. Click the checkbox "Pin to browser window" to enable the feature. Below, configure the horizontal and vertical positioning of the panel. The "Keep in front (browser only)" option will keep the panel in front of all other widgets on the page.
INTERACTIONS ON DYNAMIC PANELS VS CONTAINED WIDGETS
Dynamic panels have some of the same events as their contained widgets might have (e.g. OnClick), which can potentially lead to conflicts. If a dynamic panel and its contained widget have different cases set up on the same event, the widget's case will be evaluated instead of the panel's case.
SPECIAL EVENTS AND ACTIONS
Dynamic panels have some special capabilities that no other widgets have: they can be dragged, swiped, and scrolled; and a panel's active state (the one showing) can be changed dynamically. Events (e.g. OnSwipeRight, OnSwipeDown) and actions (e.g. "move with drag") unique to dynamic panels allow you to harness these behaviors. To learn more, read our Interactions reference article.