Árbol

Utiliza componentes de árbol para mostrar estructuras jerárquicas como sistemas de archivos, directorios de proyectos o contenido anidado. El componente de árbol ofrece compatibilidad con navegación mediante teclado y funciones de accesibilidad.

Puedes crear árboles con una lista de Markdown o con los componentes Tree.Folder y Tree.File. <Tree> y <FileTree> son alias, por lo que cualquiera de las etiquetas funciona con cualquiera de las sintaxis.

Usa la sintaxis de lista de Markdown para árboles rápidos y estáticos en los que cada carpeta puede expandirse de forma predeterminada. Usa la sintaxis de componente cuando necesites controlar el estado de apertura de cada carpeta con defaultOpen, marcar carpetas como no interactivas con openable, o mezclar archivos y carpetas a una profundidad arbitraria.

Escribe una lista de Markdown anidada dentro de <FileTree> (o <Tree>) para describir una estructura de carpetas. Añade una barra al final para indicar una carpeta o anida elementos debajo de ella. Las carpetas que contienen elementos anidados se expanden de forma predeterminada.

<FileTree>

- docs/
  - index.mdx
  - guides/
    - configuration.mdx
- docs.config.ts

</FileTree>

Deja una línea en blanco después de la etiqueta de apertura y antes de la de cierre para que la lista se procese como Markdown. El formato en línea como `código`, **negrita** o _cursiva_ se elimina de los nombres, así que úsalos solo cuando se muestren correctamente en tu compilación.

<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" />
    <Tree.File name="global.css" />
  </Tree.Folder>
  <Tree.Folder name="lib">
    <Tree.File name="utils.ts" />
    <Tree.File name="db.ts" />
  </Tree.Folder>
  <Tree.File name="package.json" />
  <Tree.File name="tsconfig.json" />
</Tree>

Crea estructuras de carpetas muy profundas anidando componentes Tree.Folder unos dentro de otros.

<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" />
    <Tree.Folder name="api" defaultOpen>
      <Tree.Folder name="auth">
        <Tree.File name="route.ts" />
      </Tree.Folder>
      <Tree.File name="route.ts" />
    </Tree.Folder>
    <Tree.Folder name="components">
      <Tree.File name="button.tsx" />
      <Tree.File name="dialog.tsx" />
      <Tree.File name="tabs.tsx" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="package.json" />
</Tree>

Añade la prop highlight a Tree.File o Tree.Folder para marcar el elemento actual. Úsala para destacar un archivo o una carpeta a los que se hace referencia en el texto cercano, como el archivo que la persona lectora debería abrir a continuación.

Resaltar una carpeta también tiñe a sus descendientes, de modo que la ruta activa se distingue incluso cuando la carpeta está expandida.

<Tree>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="layout.tsx" />
    <Tree.File name="page.tsx" highlight />
    <Tree.Folder name="api" defaultOpen highlight>
      <Tree.File name="route.ts" />
    </Tree.Folder>
  </Tree.Folder>
  <Tree.File name="package.json" />
</Tree>

Personalizar el color de resaltado

El color de resaltado se expone mediante la variable CSS --tree-highlight. Establécela en el componente raíz Tree para sobrescribir el color de ese árbol.

<Tree style={{ "--tree-highlight": "rgb(59 130 246)" }}>
  <Tree.Folder name="app" defaultOpen>
    <Tree.File name="page.tsx" highlight />
  </Tree.Folder>
</Tree>

El componente de árbol admite la navegación con el teclado.

• Teclas de flecha: Navega hacia arriba y hacia abajo por los elementos visibles.
• Flecha derecha: Expande una carpeta cerrada o se desplaza al primer elemento hijo de una carpeta abierta.
• Flecha izquierda: Contrae una carpeta abierta o se desplaza a la carpeta padre.
• Inicio (Home): Salta al primer elemento del árbol.
• Fin (End): Salta al último elemento visible del árbol.
• Enter/Espacio: Alterna el estado de la carpeta entre abierta y cerrada.
• *: Expande todas las carpetas del mismo nivel en el nivel actual.
• Búsqueda incremental: Escribe caracteres para saltar a los elementos que comienzan con esos caracteres.