Tree

Le dépliage est assuré par <details> : il fonctionne au clavier, survit à l'impression, et ne coûte pas une ligne de JavaScript.

Une arborescence de fichiers

Cliquez un dossier pour le déplier.

• docpensieve.config.mjs
• docs

  • v1.0

    • index.md
    • guide

      • installation.md
      • configuration.md
    • components

      • card.mdx
      • tree.mdx
• dist

<Tree>
  <TreeItem label="docs" open>
    <TreeItem label="index.md" />
  </TreeItem>
</Tree>

Branche ou feuille

La différence se lit à l'écriture, sans propriété à poser : une entrée avec enfants est une branche repliable, une entrée sans enfants est une feuille. open déplie la branche dès l'ouverture de la page.

Une simple liste

Sans aucune branche, l'arborescence devient une liste à chasse fixe — utile pour lister des fichiers produits.

• index.html
• versions.json
• assets/docpensieve.css

Autre chose que des fichiers

Rien n'oblige à décrire une arborescence de fichiers. Une structure de données se lit tout aussi bien.

• config

  • projectName : string
  • siteUrl : string
  • versions

    • slug : string
    • current : boolean
    • prerelease : boolean
  • theme

    • framework : 'tailwind' | 'custom'
    • tokens : Record<string, string>

Un libellé composé

label accepte du contenu, pas seulement du texte.

• 📦 package

  • index.js
  • types — généré

<TreeItem
  label={
    <span>
      📦 <strong>package</strong>
    </span>
  }
>
  …
</TreeItem>

Une réserve : ce qui est écrit entre accolades est une expression, que le compilateur ne lit pas — son résultat n'existe qu'au rendu. Une adresse posée là n'est donc pas réécrite et ignorera le préfixe de déploiement. Pour un lien dans un libellé, écrivez l'adresse complète.

Habiller l'arborescence

• en couleur

  • les enfants héritent

<Tree className="text-indigo-700 dark:text-indigo-300">…</Tree>

Ce qu'elle n'annonce pas

La structure est une liste imbriquée, pas un role="tree". Ce rôle promet à un lecteur d'écran une navigation aux flèches que rien ici n'implémenterait : l'annoncer mentirait sur ce que la page sait faire.

Un TreeItem écrit hors d'un Tree est refusé — il produirait un <li> hors de toute liste, du HTML invalide qu'aucun navigateur ne signale. Une entrée sans libellé est refusée aussi.

Une arborescence est la façon dont cette documentation montre la forme d'un projet. Ce que ces dossiers deviennent une fois générés — l'ordre, les adresses — est dans Écrire des pages.