...
Container Node | Leaf Node | |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Selected |  |  |
Disabled | NA |  |
Focused |  |   |
Focused, Hover |  |  |
Focused, Active |  |  |
Focused, Disabled | NA |  |
Interaction
Since a tree is an instance of a list, please refer to list interactions.
Hovering over a truncated node title will show a Tooltip containing the full title.
Clicking a triangle toggle button or double-clicking a container node will:
toggle the triangle button between states.
toggle the node between the collapsed and expanded states. When loading the content of the node takes more than 1 second, a Progress Indicator will appear.
Where multiple selection is used:
Clicking a check box will select or deselect the item, including all child items if exist.
If only some of the child items are selected, the parent item will be partially selected.
For reordering items, please refer to the Drag and drop.
...