Treeflex can be installed using
npm by running
yarn install treeflex
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.
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
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!
emunits. This allows you to scale the entire tree including the connectors and gaps just by changing the font-size of any or all
font-sizeof 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-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
tf-gap-*classes and the default gap.
tf-*-childrenclasses. 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.
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
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.