Axure Tutorial: Common Widgets - Tree
Introduction
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