Styling

The tree comes with very basic style.
The following classes are available for customization:

• .tree
• .tree-node
• .tree-node-expanded
• .tree-node-focused
• .tree-node-active
• .tree-node-leaf
• .toggle-children-wrapper
• .toggle-children
• .toggle-children-placeholder
• .node-content-wrapper
• .tree-children
• .tree-node-level-X

Here is the result HTML of the tree:

HTML

<tree>
  <div class="tree">
    <treenode>
      <div class="tree-node tree-node-expanded tree-node-focused tree-node-active tree-node-level-1">
        <span class="toggle-children">
        </span>

        <div class="node-content-wrapper">
          <treenodetemplate>root1</treenodetemplate>
        </div>
        <div class="tree-children">
          <treenode>
            <div class="tree-node tree-node-leaf tree-node-level-2">
              <span class="toggle-children-placeholder">
              </span>
              <div class="node-content-wrapper">
                <treenodetemplate>child1</treenodetemplate>
              </div>
              <div class="tree-children" hidden="">
              </div>
            </div>
          </treenode>
        </div>
      </div>
    </treenode>
  </div>
</tree>

Example styles

Pull right

This theme allows placing items in the right side of the tree nodes using pull-right class.
It is based on flexbox, so relevant only to browsers who support it

CSS

.tree {
  width: 500px;
}

.tree-node {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.node-content-wrapper {
  flex-grow: 1;
  position: relative;
}

.tree-children {
  flex-grow: 1;
  width: 100%;
}

.pull-right {
  position: absolute;
  right: 10px;
}

Send me your theme

If you've created a nice style for the tree, I will appreciate if you send me and I will showcase it here.
[email protected]