Axure Tutorial: Common Widgets - Tree


This article is a part of course Axure Full Course: Tutorial, Tips and Templates.

Tree is a Widget used to represent hierarchical menus, often used in file directories. 

Since the Tree Widget that comes with Axure default widget library has many limitations in terms of styling, if you have requirements for styles, please make your own Tree widgets

Adding, Deleting and Moving Nodes 

Add Sibling Node

Right-click on the Tree and select Add>Add Sibling Before or Add Sibling After to add a sibling node.

Add Child Node

Right-click on the Tree and select Add>Add Child to add a child node.

Move Node

Right-click on the Tree and select Move Up, Move Down, Indent, Outdent.

Edit Tree Icons

Right-click the tree, select Edit Tree Properties, you can edit Tree Icons in the pop-up window.

You can choose whether to display the Expand/Collapse Icon, or whether to display the tree node Icon.

You can also upload customExpand/Collapse icons in this window. 

Right-click on the tree, select the Edit Icon option, you can customize the tree node icons in the pop-up window.

Expand/Collapse Tree Node 

There are two ways to control the expansion and collapse of tree nodes:

1. Click directly on the collapse/expand icon of the tree node.

2. Control by action.
In an action, select the node object and expand or collapse.

That's all for today's lesson.In the following lessons we will continue to introduce commonly used widgets.

If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design. 

Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.