Árbol - Mintlify

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.

Árbol básico

app

layout.tsx

page.tsx

global.css

lib

package.json

tsconfig.json

Tree example

<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>

Carpetas anidadas

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

app

layout.tsx

page.tsx

api

auth

route.ts

components

package.json

Nested folders example

<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>

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.

Propiedades

Tree.Folder

name

string

requerido

El nombre de la carpeta que se muestra en el árbol.

defaultOpen

boolean

predeterminado:"false"

Indica si la carpeta se expande de forma predeterminada.

openable

boolean

predeterminado:"true"

Indica si los usuarios pueden abrir y cerrar la carpeta. Configúralo en false para carpetas no interactivas.

Tree.File

name

string

requerido

El nombre del archivo que se muestra en el árbol.

Tooltips

Actualización

⌘I

​Árbol básico

​Carpetas anidadas

​Navegación con el teclado

​Propiedades

​Tree.Folder

​Tree.File

Árbol básico

Carpetas anidadas

Navegación con el teclado

Propiedades

Tree.Folder

Tree.File