The Tree component is a tree based view on a array of javascript objects.
A collapsible menu requires the developer to pass in an array of javascript objects (with at least a "label" field in each object). These objects are then rendered as a tree. To create a heirarchy (tree nesting), an array of children can be added to an object under the field name "childItems".
Clicking on a leaf item triggers a "navActionPerformed" event. The event.detail will indicate which item has been clicked (either by sending the "actionId" field value or a random number if one wasn't set). A payload is also returned, which can be passed in as part of each object in the "detail" field.
Clicking on a node to expand/collapse a branch triggers a treeChange event, passing the new state of the node and the nodeId in the detail of the event object.
The icons used for the expand/collapse state of a node change be changed by setting the iconState property. This can either be an object with a single "icon" field, or an object with an "opened" and "closed" field.
Individual menu items can be hidden with the "hide" field. This can either be a boolean, or a function (which returns a boolean)
The tree control respects the "disabled" attribute and the "dense" attribute. Right to left is also suppoted out of the box.
Keyboard navigation is supported (using up/down arrows to move and spacebar/enter to expand/collapse a node).
- Optional item icon
- Branch icon (can be at start or end of label)
- Nested indicator (can be hidden)
- Indentation of submenus (set with --uwc-tree--submenu-items-indentation)
- Row spacing (set with --uwc-tree---row-spacing)
Sub menus are created by adding an array of menu items to an existing item, in the "childItems" field.
Clicking on a menu item will emit a "navActionPerformed" event, whose detail field includes an actionId (either passed in or auto-generated) and a payload (which can be passed in to the menu item (in the "detail" field))
Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.
Related components: