Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Types

Image

Single selection

Multiple selection

Smart Selection

Image Added

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 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 some cases, a counter will appear next to the node title, showing the number of contained items.

A root node (optional)

  • A single node that appears at the top of the tree and contains all other nodes.

  • It appears only when relevant, or when the user is allowed to select all items at once.

...