A basic hierarchy tree with one root node and two children.
Loading...
Treeflex can be installed using yarn or npm by running
yarn install treeflex
OR
npm install treeflex
Treeflex can also be included directly from unpkg.com's CDN.
<link rel="stylesheet" href="https://unpkg.com/treeflex/dist/css/treeflex.css">Creating trees with Treeflex is as simple as writing nested HTML lists. Treeflex needs a block-level element with a tf-tree class and an unordered list (ul) as a direct child of the element.
Each li element's first child with a tf-node-content class (or tf-nc for short) is used as that node's content. This is required. You can use whatever tag you like for node content, however it is suggested that you use a span or div element.
Each li element that is not the leaf node should have an unordered list (ul) as its second child. Each li element inside this ul acts as this node's child.
There's no limit on how deep the trees could go. However, every new level adds to the width of the entire tree.
As simple as that!
em units. This allows you to scale the entire tree including the connectors and gaps just by changing the font-size of any or all .tf-tree element(s). font-size of the tree on smaller screens to make it fit in the viewport. Treeflex comes with a few utility classes to help customize the trees. These are:
tf-nctf-gap-smtf-gap-lgtf-dashed-childrentf-dotted-childrentf-nc is just short for tf-node-content. You can use either of these for node content.
tf-gap-* classes go on the tf-tree element. These classes increase and decrease the gap between the nodes.
tf-*-children classes go on li elements. These classes change the connector style to dotted/dashed for all nodes inside the applied li.
tf-gap-* classes and the default gap. tf-*-children classes. This could be useful for scenarios where one might want to visually represent a node that hasn't been permanently added to the tree yet. Trees can be customized with your own styles. Here are the classes/elements you need to target to change various aspects of the tree.
For node content related styles, only tf-nc class is used for brevity, these styles can and should be applied to .tf-node-content too if that's what you choose to use.
.tf-tree .tf-nc This selector can be used to style the look & feel of the nodes.
There are some limitations to this though, you should not change the margins and the pseudo elements (:before, :after) of these elements unless you absolutely know what you're doing. CSS transforms don't work well on these elements either. You can always apply the transforms and other styles to the elements inside though. It's also best to avoid using ul and li elements inside node content.
Changing the font-size of .tf-tree for non scaling related reasons should be avoided as all the gaps and margins are calculated based on that.
To change the font-size of the node content, content should be wrapped inside another element and styles should be applied on that element.
.tf-tree .tf-nc:before, .tf-tree .tf-nc:after These selectors can be used to style the vertical node connectors. For instance, you can use these to increase the width or border-style of the connectors.
.tf-tree li li:before Same as above but for styling the horizontal connectors.