Tree
Muestra jerarquías de archivos y carpetas con expansión/colapso interactivo y navegación por teclado. Ideal para documentar la estructura de proyectos.
Tree muestra jerarquías de archivos y carpetas con expansión/colapso interactivo y navegación completa por teclado. Está diseñado para documentar estructuras de proyectos, mostrar distribuciones de directorios o explicar dónde deben ir los archivos en una base de código.
Usa Tree cuando:
- Muestres la estructura del proyecto en guías de inicio
- Expliques la organización de archivos en tutoriales
- Documentes la salida del CLI que muestra árboles de directorios
- Ilustres dónde añadir archivos en guías de configuración
Uso
<Tree>
<TreeFolder name="src" defaultOpen>
<TreeFile name="index.ts" />
</TreeFolder>
</Tree>Tree básico
<Tree>
<TreeFolder name="src" defaultOpen>
<TreeFile name="index.ts" />
<TreeFile name="config.ts" />
</TreeFolder>
<TreeFile name="package.json" />
</Tree>Ejemplo de estructura de proyecto
Muestra a los lectores cómo se ve un proyecto después de la configuración:
Tree vs bloques de código
| Característica | Tree | Bloque de código |
|---|---|---|
| Interactivo | Sí (expandir/colapsar) | No |
| Navegación por teclado | Soporte completo | No |
| Jerarquía visual | Iconos + sangría | Solo texto |
| Mejor para | Documentación | Referencias rápidas en línea |
Usa Tree para la documentación principal de estructura. Usa bloques de código para referencias rápidas en línea como "crea src/index.ts".
Navegación por teclado
El componente Tree admite navegación completa por teclado:
| Tecla | Acción |
|---|---|
Arrow Down | Ir al siguiente elemento |
Arrow Up | Ir al elemento anterior |
Arrow Right | Expandir carpeta o ir al primer hijo |
Arrow Left | Colapsar carpeta o ir al elemento padre |
Home | Ir al primer elemento |
End | Ir al último elemento visible |
Enter / Space | Alternar expansión/colapso de carpeta |
| Escribir caracteres | Saltar al elemento coincidente |
Props
TreeFolder
Nombre de la carpeta mostrado en el árbol.
Iniciar en estado expandido.
Si la carpeta puede alternarse.
TreeFile
Nombre del archivo mostrado en el árbol.