Saltearse al contenido
Starlight
Filters

    Á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

    Sección titulada «Importación»
    import { FileTree } from '@astrojs/starlight/components';

    Uso

    Sección titulada «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

    Sección titulada «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

    Sección titulada «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

    Sección titulada «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>

    Sección titulada «Props de <FileTree>»

    Implementación: FileTree.astro

    El componente <FileTree> no acepta ninguna propiedad.