| Table of Contents |
|---|
Description
A tree is a hierarchical List, allowing users to expand and collapse nodes to show or hide nested items.
...
Image | |||
Single selection |  | ||
Multiple selection |  | ||
Smart Selection |  Read only tree | Ori Cohen Please add here the image when ready | Dependencies between leaf nodes |
Usage & Behavior
Trees are used to navigate within hierarchical lists of objects (e.g. organizations), and then to select one or more items in order to filter content or show additional information.
They usually appear inside a Filter Pane, a Details Panel, or a Widget.
...
A leaf node is an object that contains data.
Each leaf node consists of:
a title. Long titles can be truncated and a Tooltip can be used on hover.
an optional icon, representing the node's type (e.g. a document). If all nodes are of the same type, the icon should not be used.
Where a leaf node represents an employee, an avatar image may appear instead of an icon.When leaf nodes have dependencies between them, that is - when turning on/off one leaf’s checkbox will turn on/off another leaf’s checkbox (usually relevant for privileges trees), a dependency line will be added between them. The influenced leaf node will be displayed on top, and the influenced node/s - bellow it. For example:
...
Container nodes:
A container node is an object containing other items (e.g. a folder).
Each container node consists of:
a triangle toggle button, to the left of the title.
an icon.
a title.
Container nodes have 2 states:
Collapsed, when all child items are hidden. In this case, the triangle toggle button points towards the node title.
Expanded, when all or some levels of child items are shown. In this case, the triangle toggle button points downwards.
If the icon representing a container node is a folder, it may also have the 2 states, closed (when collapsed) and open (when expanded).
...
In most cases, nodes should be ordered alphabetically, to allow users locating specific items quickly.
Other cases may include logical, chronological or numeric orders.
States
...
Container Node | Leaf Node | |
|---|---|---|
Regular |  |  |
Hover Hovered dependent leaves |  |  Ori Cohen please add the example here |
Active |  |  |
Selected |  |  |
Disabled | NA |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
Focused, Disabled | NA |  |
...
when there is a need to select one or more items in a hierarchical list. That’s not the only caseRead-only tree - use when the user can only view (and, contrary to a disabled tree, would never be able to do more than just view).
Don't use:
where there is no hierarchy → use a List instead.
...