Arborescence

Structure hiérarchique dépliable avec nœuds, branches et feuilles. Supporte une variante avec cases à cocher et propagation tri-état.

Arborescence simple

Documents
- Rapports
  - Rapport 2025.pdf
- Note de service.docx

<ul class="bj-tree" role="tree">
  <li class="bj-tree__item" role="treeitem">
    <div class="bj-tree__item-content">
      <button type="button" class="bj-tree__toggle" data-bj-tree-toggle aria-expanded="true">
        <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
      </button>
      <i class="ri-folder-open-line bj-tree__icon" aria-hidden="true"></i>
      <span class="bj-tree__label">Documents</span>
    </div>
    <ul class="bj-tree__branch" role="group">
      <li class="bj-tree__item" role="treeitem">
        <div class="bj-tree__item-content">
          <button type="button" class="bj-tree__toggle" data-bj-tree-toggle aria-expanded="false">
            <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
          </button>
          <i class="ri-folder-line bj-tree__icon" aria-hidden="true"></i>
          <span class="bj-tree__label">Rapports</span>
        </div>
        <ul class="bj-tree__branch" role="group" hidden>
          <li class="bj-tree__item" role="treeitem">
            <div class="bj-tree__item-content">
              <span class="bj-tree__toggle-spacer"></span>
              <i class="ri-file-text-line bj-tree__icon" aria-hidden="true"></i>
              <span class="bj-tree__label">Rapport 2025.pdf</span>
            </div>
          </li>
        </ul>
      </li>
      <li class="bj-tree__item" role="treeitem">
        <div class="bj-tree__item-content">
          <span class="bj-tree__toggle-spacer"></span>
          <i class="ri-file-text-line bj-tree__icon" aria-hidden="true"></i>
          <span class="bj-tree__label">Note de service.docx</span>
        </div>
      </li>
    </ul>
  </li>
</ul>

Avec cases à cocher

Permissions
- Lecture
- Écriture
- Suppression

<ul class="bj-tree bj-tree--checkbox" role="tree">
  <li class="bj-tree__item" role="treeitem">
    <div class="bj-tree__item-content">
      <button type="button" class="bj-tree__toggle" data-bj-tree-toggle aria-expanded="true">
        <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
      </button>
      <input type="checkbox" class="bj-tree__checkbox" />
      <span class="bj-tree__label">Permissions</span>
    </div>
    <ul class="bj-tree__branch" role="group">
      <li class="bj-tree__item" role="treeitem">
        <div class="bj-tree__item-content">
          <span class="bj-tree__toggle-spacer"></span>
          <input type="checkbox" class="bj-tree__checkbox" />
          <span class="bj-tree__label">Lecture</span>
        </div>
      </li>
      <li class="bj-tree__item" role="treeitem">
        <div class="bj-tree__item-content">
          <span class="bj-tree__toggle-spacer"></span>
          <input type="checkbox" class="bj-tree__checkbox" />
          <span class="bj-tree__label">Écriture</span>
        </div>
      </li>
      <li class="bj-tree__item" role="treeitem">
        <div class="bj-tree__item-content">
          <span class="bj-tree__toggle-spacer"></span>
          <input type="checkbox" class="bj-tree__checkbox" />
          <span class="bj-tree__label">Suppression</span>
        </div>
      </li>
    </ul>
  </li>
</ul>

Variante compacte

Racine
- Élément 1
- Élément 2

<ul class="bj-tree bj-tree--compact" role="tree">
  <li class="bj-tree__item" role="treeitem">
    <div class="bj-tree__item-content">
      <button type="button" class="bj-tree__toggle" data-bj-tree-toggle aria-expanded="true">
        <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
      </button>
      <span class="bj-tree__label">Racine</span>
    </div>
    <ul class="bj-tree__branch" role="group">
      <li class="bj-tree__item" role="treeitem">
        <div class="bj-tree__item-content">
          <span class="bj-tree__toggle-spacer"></span>
          <span class="bj-tree__label">Élément 1</span>
        </div>
      </li>
      <li class="bj-tree__item" role="treeitem">
        <div class="bj-tree__item-content">
          <span class="bj-tree__toggle-spacer"></span>
          <span class="bj-tree__label">Élément 2</span>
        </div>
      </li>
    </ul>
  </li>
</ul>

Cases à cocher + compact

Les modificateurs bj-tree--checkbox et bj-tree--compact peuvent être combinés sur la même racine bj-tree. Le composant Vue BjTreeview applique les mêmes classes sur le rendu HTML.

Dossiers
- Courrier
- Archives

<ul class="bj-tree bj-tree--checkbox bj-tree--compact" role="tree">
  <li class="bj-tree__item" role="treeitem">
    <div class="bj-tree__item-content">
      <button type="button" class="bj-tree__toggle" data-bj-tree-toggle aria-expanded="true">
        <i class="ri-arrow-right-s-line" aria-hidden="true"></i>
      </button>
      <input type="checkbox" class="bj-tree__checkbox" />
      <span class="bj-tree__label">Dossiers</span>
    </div>
    <ul class="bj-tree__branch" role="group">
      <li class="bj-tree__item" role="treeitem">
        <div class="bj-tree__item-content">
          <span class="bj-tree__toggle-spacer"></span>
          <input type="checkbox" class="bj-tree__checkbox" />
          <span class="bj-tree__label">Courrier</span>
        </div>
      </li>
      <li class="bj-tree__item" role="treeitem">
        <div class="bj-tree__item-content">
          <span class="bj-tree__toggle-spacer"></span>
          <input type="checkbox" class="bj-tree__checkbox" />
          <span class="bj-tree__label">Archives</span>
        </div>
      </li>
    </ul>
  </li>
</ul>

Combinaisons cases à cocher × compact

Quatre combinaisons : arborescence simple (sans case, espacement standard), cases à cocher seules, compact seul, puis bj-tree--checkbox bj-tree--compact ci-dessus pour les deux options à la fois — la même structure HTML s’applique dans chaque cas.

Simple

bj-tree

Cases

bj-tree--checkbox

Compact

bj-tree--compact

Cases + compact

bj-tree--checkbox + bj-tree--compact

<!--
  bj-tree
  bj-tree bj-tree--checkbox
  bj-tree bj-tree--compact
  bj-tree bj-tree--checkbox bj-tree--compact
-->

Classes CSS

Classe / attribut	Description
`bj-tree`	Conteneur racine <code><ul></code> avec <code>role="tree"</code>.
`bj-tree__item`	Élément <code><li></code> avec <code>role="treeitem"</code>.
`bj-tree__item-content`	Ligne de contenu (toggle + label + icône).
`bj-tree__branch`	Sous-arbre <code><ul></code> avec <code>role="group"</code>.
`bj-tree__toggle`	Bouton expand/collapse (chevron).
`data-bj-tree-toggle`	Sur le bouton d’expansion : ancre pour le module JS treeview.
`bj-tree__toggle-spacer`	Espace réservé pour aligner les feuilles sans toggle.
`bj-tree__label`	Libellé du nœud.
`bj-tree__icon`	Icône optionnelle du nœud.
`bj-tree__checkbox`	Case à cocher (avec <code>bj-tree--checkbox</code>).
`bj-tree--checkbox`	Active les checkboxes et la propagation tri-état.
`bj-tree--compact`	Variante compacte (padding réduit).

Rôles ARIA

Rôle	Description
`role="tree"`	Conteneur racine de l’arbre (`role="tree"` sur l’élément liste racine).
`role="treeitem"`	Chaque nœud focusable du parcours linéaire (feuille ou parent).
`role="group"`	Sous-arbre listant les enfants d’un parent (`role="group"` sur la liste imbriquée).

Raccourcis clavier

Touche	Action
`Flèche bas`	Aller à l’élément visible suivant (ordre linéaire aplati).
`Flèche haut`	Aller à l’élément visible précédent.
`Flèche droite`	Développer le nœud s’il est replié ; s’il est déjà développé, aller au premier enfant.
`Flèche gauche`	Replier le nœud s’il est développé ; sinon aller au parent (ou rien si racine).
`Début (Home)`	Aller au premier élément de l’arbre.
`Fin (End)`	Aller au dernier élément visible.
`Entrée ou Espace`	Sans cases à cocher : développer ou replier le nœud. En mode cases à cocher : activer ou désactiver la case du nœud courant.