Tree

Multi-level directory of editable items.

How to

The Tree component is a multi-level directory of items.

In its default version, the items' content is not editable. Each item is either a link or a group. Clicking on the group will reveal its content.

To make the content editable, add the data-tree-content-editable="true" data attribute to the .tree element. In the --content-editable variation, to expand a node, you need to click on the arrow icon. To edit the items' content, double click on them.

Indentation Levels #

Use the $tree-indentation-levels variable to set the tree indentation levels:

$tree-indentation-levels: 3;

Icons #

There are two icon types: 1. Arrow icons, and 2. Label icons.

The first type indicates, with its rotation, whether a node is expanded or not. The second type is the icon showing the node type (e.g., a folder icon for the group, an image icon for a link to a file, etc).

The custom properties declared in the SCSS file of the component control the icon size. The color is controlled by the color utility classes applied to the icons.

Editable Content #

When using the --content-editable variation, the labelEdited custom event is emitted each time the label is modified. You can use this custom event to keep track of the updated labels:

var tree = document.getElementsByClassName('js-tree')[0];
tree.addEventListener('labelEdited', function(event) {
  // a label value has been modified
  // event.detail is the .tree__label element that was edited
});

Keyboard Navigation #

Default version:

Content-editable version:

Categories

• Data Display > Accordion
• Navigation > Misc
• Navigation > Side Nav

Bug report & feedback

Component Github page ↗