Árbol de archivos

Para mostrar la estructura de un directorio con iconos de archivo y subdirectorios colapsables, usa el componente <FileTree>.

Importación

Importar componentes

import { FileTree } from "@astrojs/starlight/components";

Uso

Muestra un árbol de archivos con iconos de archivo y subdirectorios colapsables usando el componente <FileTree>.

Especifica la estructura de tus archivos y directorios con una lista Markdown no ordenada dentro de <FileTree>. Crea un subdirectorio usando una lista anidada o agrega una / al final de un elemento de la lista para renderizarlo como un directorio sin contenido específico.

Uso de FileTree

import { FileTree } from "@astrojs/starlight/components";

<FileTree>
  - astro.config.mjs - package.json - src - components - Header.astro -
  Title.astro - pages/
</FileTree>;

Preview:

• astro.config.mjs
• package.json
• Directorysrc

  • Directorycomponents

    • Header.astro
    • Title.astro
  • Directorypages/

    • …

Resaltar entradas

Haz que un archivo o directorio destaque haciendo que su nombre esté en negrita, por ejemplo, **README.md**.

Resaltar entradas

import { FileTree } from "@astrojs/starlight/components";

import { FileTree } from "@astrojs/starlight/components";

<FileTree>
  - astro.config.mjs - package.json - src - components - Header.astro -
  Title.astro - pages/
</FileTree>;

Preview:

• astro.config.mjs
• package.json
• Directorysrc

  • Directorycomponents

    • Header.astro
    • Title.astro
  • Directorypages/

    • …

Agregar comentarios

Agrega un comentario a un archivo o directorio agregando más texto después del nombre. El formateo de Markdown en línea como negritas e itálicas es compatible en los comentarios.

Agregar comentarios

import { FileTree } from "@astrojs/starlight/components";

<FileTree>
  - src - components - Header.astro un archivo **importante** - Title.astro
</FileTree>;

• Directorysrc

  • Directorycomponents

    • Header.astro un archivo importante
    • Title.astro

Agregar marcadores de posición

Agrega archivos y directorios de marcador de posición usando ... o … como nombre. Esto puede ser útil para indicar a un lector que se espera que una carpeta contenga más elementos sin especificarlos todos explícitamente.

Agregar marcadores de posición

import { FileTree } from "@astrojs/starlight/components";

<FileTree>- src - components - Header.astro - …</FileTree>;

• Directorysrc

  • Directorycomponents

    • Header.astro
    • …

Props de <FileTree>

El componente <FileTree> no acepta ninguna propiedad.