Notes

Utiliser details pour faire un arbre hiérarchique pliable

Date
cats
tags
techs

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>
Code HTML d'une Treeview à base d'éléments details
.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;
}
Code CSS pour une treeview à base d'éléments details
  • 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
Démonstration

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.