Listes et contenu

Arborescence

nouveauClasses hb-tree hb-tree-leafVuetify 2 v-treeview denseVuetify 3 v-treeview (labs)

Quand l'utiliser

Pour choisir dans une hiérarchie à deux ou trois niveaux : famille de produits, rayon et zone, dossiers d'un import. Au-delà de trois niveaux ou de quelques centaines de feuilles, une recherche (v-autocomplete) vaut mieux.

Poissons 24
- Poissons entiers 9
- Filets et pavés 15
Coquillages 11
Crustacés 7

Code

<ul class="hb-tree" style="max-width:360px">
  <li><details open><summary>Poissons <span class="hb-count">24</span></summary><ul>
    <li><details open><summary>Poissons entiers <span class="hb-count">9</span></summary><ul>
      <li><button class="hb-tree-leaf" aria-current="true">Saumon entier <span class="hb-count">210</span></button></li>
      <li><button class="hb-tree-leaf">Bar de ligne</button></li>
      <li><button class="hb-tree-leaf">Dorade royale</button></li>
    </ul></details></li>
    <li><details><summary>Filets et pavés <span class="hb-count">15</span></summary><ul><li><button class="hb-tree-leaf">Pavé de saumon</button></li></ul></details></li>
  </ul></details></li>
  <li><details><summary>Coquillages <span class="hb-count">11</span></summary><ul><li><button class="hb-tree-leaf">Moules bouchot</button></li></ul></details></li>
  <li><details><summary>Crustacés <span class="hb-count">7</span></summary><ul><li><button class="hb-tree-leaf">Crevettes cuites</button></li></ul></details></li>
</ul>

Règles

Un nœud (summary) ouvre et ferme ; une feuille (hb-tree-leaf, <button> ou <a>) sélectionne et porte aria-current="true".
Les comptes à droite aident à choisir où descendre.
Natif : clavier et lecteur d'écran sans script ; l'application mémorise les nœuds ouverts si l'écran revient souvent.