Styling

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

• .tree
• .tree-node
• .tree-node-wrapper
• .tree-node-expanded
• .tree-node-collapsed
• .tree-node-focused
• .tree-node-active
• .tree-node-level-X
• .tree-node-leaf
• .node-wrapper
• .toggle-children-wrapper
• .toggle-children
• .toggle-children-placeholder
• .node-content-wrapper
• .tree-children
• .tree-node-loading
• .node-drop-slot
• .is-dragging-over
• .is-dragging-over-disabled

Here is the result HTML of the tree (written in HAML syntax for clarity):

HAML

%tree
  %div.tree
    %treenode
      %div.tree-node.tree-node-level-1.( tree-node-expanded | tree-node-collapsed | tree-node-active | tree-node-focused | tree-node-leaf )
        %treenodedropslot
          %div.node-drop-slot

        %div.node-wrapper
          %span.toggle-children-wrapper
            %span.toggle-children
          // or:
          %span.toggle-children-placeholder

          %div.node-content-wrapper (.is-dragging-over | .is-dragging-over-disabled)
            %treenodecontent
              %span
                {{ node name }}

        %div.tree-children
          %div
            %treenode
              ...
            %treenode
              ...
          // or:
          %loadingcomponent.tree-node-loading
            %span
              {{ ...loading }}
        // or:
        %div.tree-children


      %treenodedropslot
        %div.node-drop-slot

Example styles

Branch lines

This theme puts explorer like branch lines that connect the parents with their children

CSS

.node-content-wrapper, .tree-children {
  position: relative;
}

.node-content-wrapper::before, .tree-children::after {
  content: "";
  position: absolute;
}

.node-content-wrapper::before {
  border-bottom: 1px solid lightgrey;
  border-left: 1px solid lightgrey;
  height: 28px;
  top: -17px;
  width: 20px;
  left: -28px;
}

.tree-node-leaf > .node-wrapper > .node-content-wrapper::before {
  width: 25px;
}

.tree-children::after {
  border-left: 1px solid lightgrey;
  height: 100%;
  top: -15px;
  left: -15px;
}

treenode:last-child > .tree-node > .tree-children::after {
  border-left: none;
}

.toggle-children {
  z-index: 1;
}

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: 300px;
}

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

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

.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]