Salta ai contenuti
Starlight
Filters

    File Tree

    Questi contenuti non sono ancora disponibili nella tua lingua.

    To display the structure of a directory with file icons and collapsible sub-directories, use the <FileTree> component.

    Preview
    • astro.config.mjs an important file
    • package.json
    • README.md
    • Directorysrc
      • Directorycomponents
        • Header.astro
      • …
    • Directorypages/
      • …

    Import

    Section titled “Import”
    import { FileTree } from '@astrojs/starlight/components';

    Usage

    Section titled “Usage”

    Display a file tree with file icons and collapsible sub-directories using the <FileTree> component.

    Specify the structure of your files and directories with an unordered Markdown list inside <FileTree>. Create a sub-directory using a nested list or add a / to the end of a list item to render it as a directory without specific content.

    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/
        • …

    Highlight entries

    Section titled “Highlight entries”

    Make a file or directory stand out by making its name bold, e.g. **README.md**.

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

    <FileTree>
    

    - src
      - components
        - **Header.astro**
        - Title.astro
    

    </FileTree>
    Preview
    • Directorysrc
      • Directorycomponents
        • Header.astro
        • Title.astro

    Add comments

    Section titled “Add comments”

    Add a comment to a file or directory by adding more text after the name. Inline Markdown formatting such as bold and italics is supported in comments.

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

    <FileTree>
    

    - src
      - components
        - Header.astro an **important** file
        - Title.astro
    

    </FileTree>
    Preview
    • Directorysrc
      • Directorycomponents
        • Header.astro an important file
        • Title.astro

    Add placeholders

    Section titled “Add placeholders”

    Add placeholder files and directories by using either ... or … as the name. This can be useful to indicate to a reader that a folder is expected to contain more items without specifying them all explicitly.

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

    <FileTree>
    

    - src
      - components
        - Header.astro
        - …
    

    </FileTree>
    Preview
    • Directorysrc
      • Directorycomponents
        • Header.astro
        • …

    <FileTree> Props

    Section titled “<FileTree> Props”

    Implementation: FileTree.astro

    The <FileTree> component does not accept any props.