Author: | dumptyd |
---|---|
Views Total: | 34,733 views |
Official Page: | Go to website |
Last Update: | September 16, 2018 |
License: | MIT |
Preview:

Description:
The Treeflex CSS library lets you create a flexible, responsive, semantic, SEO-friendly hierarchy tree from nested HTML lists.
Ideal for family and organization chart/tree.
How to use it:
Load the Treeflex.css from a CDN.
<link href="https://unpkg.com/treeflex/dist/css/treeflex.css" rel="stylesheet">
Or install & import the treeflex.scss
into your project.
# Yarn $ yarn add treeflex # NPM $ npm install treeflex --save
Create a basic hierarchy tree from nested HTML lists as follows:
<div class="tf-tree example"> <ul> <li> <span class="tf-nc">1</span> <ul> <li> <span class="tf-nc">2</span> <ul> <li><span class="tf-nc">4</span></li> <li> <span class="tf-nc">5</span> <ul> <li><span class="tf-nc">9</span></li> <li><span class="tf-nc">10</span></li> </ul> </li> <li><span class="tf-nc">6</span></li> </ul> </li> <li> <span class="tf-nc">3</span> <ul> <li><span class="tf-nc">7</span></li> <li><span class="tf-nc">8</span></li> </ul> </li> </ul> </li> </ul> </div>
Apply your own CSS styles to the nodes & connectors.
.example .tf-nc { /* css here */ } .tf-custom .tf-nc:before, .tf-custom .tf-nc:after { /* css here */ } .tf-custom li li:before { /* css here */ }
Available utilities.
tf-gap-sm
: the space between nodes (small screen)tf-gap-lg
: the space between nodes (large screen)tf-dashed-children
: dashed connectorstf-dotted-children
: dotted connectors