Utiliser details pour faire un arbre hiérarchique pliable
J'utilise depuis plusieurs années des listes à puces imbriquées et du code javascript pour créer des treeview à noeuds pliables / déplisables. Avec le support de details
arrivant enfin dans Firefox 49, j'ai voulu si on ne pouvait pas utiliser ces éléments pour créer ce type de widget.
L'élément details
est implémenté dans Chrome depuis des lustres ; son implémentation dans Edge est en considération
A noter aussi que Firefox 49 emmène d'autres évolutions plutôt notables :
- Narrate, Un lecteur audio dans la vue lisibilité, qui fonctionne plutôt bien.
- L'arrivée du positionnement x et y du fond des éléments
<ul class="tree-details">
<li>
<details>
<summary>Item 1</summary>
<ul>
<li>
<details>
<summary>Item 1.1</summary>
<ul>
<li class="leaf">Item 1.1.1</li>
<li class="leaf">Item 1.1.2</li>
</ul>
</details>
</li>
<li class="leaf">Item 1.2</li>
<li class="leaf">Item 1.3</li>
</ul>
</details>
</li>
<li>
<details>
<summary>Item 2</summary>
<ul>
<li class="leaf">Item 2.1</li>
<li class="leaf">Item 2.2</li>
<li class="leaf">Item 2.3</li>
</ul>
</details>
</li>
</ul>
.tree-details,
.tree-details ul {
margin-left: 0;
padding-left: 1rem;
list-style: none;
}
.tree-details ul,
.tree-details details {
margin-bottom: 0;
margin-top: 0;
}
.tree-details summary {
margin-left: -1rem;
}
.tree-details .leaf {
list-style-type: disc;
}
-
Item 1
-
Item 1.1
- Item 1.1.1
- Item 1.1.2
- Item 1.2
- Item 1.3
-
-
Item 2
- Item 2.1
- Item 2.2
- Item 2.3
Il n'y aurait aucune raison sémantique pour construire une treeview de cette manière - il s'agit juste ici de tirer parti du comportement graphique d'un disclosure widget pour implémenter le plier / déplier des noeuds.