Árbol de archivos
Para mostrar la estructura de un directorio con iconos de archivo y subdirectorios colapsables, usa el componente <FileTree>
.
Importación
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.
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>
{% filetree %}- src - components - **Header.astro** - Title.astro{% /filetree %}
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>
{% 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.
import { FileTree } from '@astrojs/starlight/components';
<FileTree>
- src - components - Header.astro - …
</FileTree>
{% filetree %}- src - components - Header.astro - …{% /filetree %}
Directorysrc
Directorycomponents
- Header.astro
- …
Props de <FileTree>
Implementación: FileTree.astro
El componente <FileTree>
no acepta ninguna propiedad.