Saltearse al contenido

Árbol de archivos

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

Preview
  • astro.config.mjs un archivo importante
  • package.json
  • README.md
  • Directorysrc
    • Directorycomponents
      • Header.astro
  • Directorypages/

Importación

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.

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

import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- src
- components
- **Header.astro**
- Title.astro
</FileTree>
Preview
  • Directorysrc
    • Directorycomponents
      • Header.astro
      • Title.astro

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.

import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- src
- components
- Header.astro un archivo **importante**
- Title.astro
</FileTree>
Preview
  • 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.

import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- src
- components
- Header.astro
-
</FileTree>
Preview
  • Directorysrc
    • Directorycomponents
      • Header.astro

Props de <FileTree>

Implementación: FileTree.astro

El componente <FileTree> no acepta ninguna propiedad.