Árbol jerárquico semántico en CSS puro-Treeflex
| Autor: | dumptyd |
|---|---|
| Views Total: | 1,677 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 16, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
La biblioteca CSS de Treeflex le permite crear un árbol de jerarquías flexible, adaptable, semántico y amigable con el SEO a partir de listas HTML anidadas.
Ideal para familia y organigrama/árbol.
Funcionamiento
Cargue el Treeflex. CSS de una red CDN.
<link href="https://unpkg.com/treeflex/dist/css/treeflex.css" rel="stylesheet">
O instale & importar el treeflex. SCSS en el proyecto.
# Yarn $ yarn add treeflex # NPM $ npm install treeflex --save
Cree un árbol de jerarquía básico a partir de listas HTML anidadas de la siguiente manera:
<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>
Aplique sus propios estilos CSS a los nodos & conectores.
.example .tf-nc {
/* css here */
}
.tf-custom .tf-nc:before,
.tf-custom .tf-nc:after {
/* css here */
}
.tf-custom li li:before {
/* css here */
} Utilidades disponibles.
TF-Gap-SM: el espacio entre los nodos (pantalla pequeña)TF-Gap-LG: el espacio entre los nodos (pantalla grande)TF-discontinua-de los niños: conectores discontinuasTF-punteado-de los niños: conectores punteados
