TREE WIDGETS

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

MOST COMMON USE

FILE BROWSERS

You can use a tree widget to simulate a file browser. Clicking the various nodes of the tree widget can show different widgets on the page or open different pages in the project.

EDITING

ADDING, MOVING, AND REMOVING TREE NODES

To add nodes, right-click on a node and use the "Add" submenu. You can choose to add a child node or sibling node.


To move a tree node, right-click the node and use the "Move" submenu. You can choose to move a node up or down or indent or outdent it.

LOCATION, SIZE, AND STYLE

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.


The size of a tree widget is determined by the size of its contents. When additional content is added, the tree widget automatically resizes to contain the new content.


Editable properties of a tree widget's formatting include: text font and family; line, fill, and text colors; and border color and thickness. These properties can be controlled from both the Style tab of the Inspector and in the Style Toolbar at the top of the interface.


When borders are added to a tree widget, they appear around each node of the tree. You can set the thickness, color, and pattern.

SHOWING EXPAND / COLLAPSE ICONS

By default, each tree node with at least one child has one icon each for expanding and collapsing the child(ren). You can turn off the icon using the "Show expand/collapse icon" checkbox in the Properties tab. You can also replace the default icons with your own expand and collapse icons. Import your own icon in the Properties tab.

ADDING ICONS TO TREE NODES

To add custom icons to your tree, right-click a node and click "Edit Icon". Import an image to serve as a custom icon. You can choose whether to apply the icon just to the current node or to also apply it to to sibling and child nodes.

INTERACTIVITY

INTERACTION STYLES

Interaction styles are alternative sets of style properties (e.g. color, border, font weight) which are applied in certain situations, for example after a widget is clicked.

LINKS

The quickest way to add a link to a tree widget 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. You can add an interaction to the whole tree or to an individual node. Learn more about creating interactions here.

LIMITATIONS AND WORKAROUNDS

CUSTOM LINES

The lines which connect the tree nodes cannot be formatted. If custom formatting is required, try instead making your own tree structure with shape widgets and lines drawn with the pen tool.

EMBEDDING WIDGETS INTO TREE NODES

Tree nodes can only contain text and an icon. It is not possible to add widgets to a tree node. If additional tree contents are needed, try making your own tree structure with shape widgets.

NOT ADAPTIVE

All aspects of menu widgets are consistent across all adaptive views. To style a tree differently across adaptive views, you can place a different tree widget in each adaptive view, "unplacing" from each view the tree widgets designed for other adaptive views.

Tree widgets can have the following interaction styles:


MouseOver: When the cursor moves over a widget

MouseDown: When the widget is clicked on but not yet released

Selected: When an interaction has set the widget to its selected state


Sibling nodes all share the same interaction styles.


In each scenario, the alternative look you've configured for that interaction style will be applied to the widget. If you haven't set up a given interaction style, the widget's look will remain unchanged during that interaction.


The interaction styles of each widget are configured in the Properties tab. Click the name of an interaction style to open the "Set Interaction Styles" dialog. Check the checkbox next to a style property and configure it to add it to the overall interaction style. In addition to choosing from specific style properties, you can also choose to apply a widget style as an interaction style.