Saltearse al contenido
Starlight

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