Aller au contenu
Starlight
Filters

    Arborescence de fichiers

    Pour afficher la structure d’un répertoire avec des icônes de fichiers et des sous-répertoires repliables, utilisez le composant <FileTree>.

    Aperçu
    • astro.config.mjs un fichier important
    • package.json
    • README.md
    • Répertoiresrc
      • Répertoirecomponents
        • Header.astro
      • …
    • Répertoirepages/
      • …

    Importation

    Section intitulée « Importation »
    import { FileTree } from '@astrojs/starlight/components';

    Utilisation

    Section intitulée « Utilisation »

    Affichez une arborescence de fichiers avec des icônes de fichiers et des sous-répertoires repliables en utilisant le composant <FileTree>.

    Spécifiez la structure de vos fichiers et répertoires avec une liste Markdown non ordonnée à l’intérieur de <FileTree>. Créez un sous-répertoire à l’aide d’une liste imbriquée ou ajoutez un / à la fin d’un élément de liste pour l’afficher comme un répertoire sans contenu spécifique.

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

    <FileTree>
    

    - astro.config.mjs
    - package.json
    - src
      - components
        - Header.astro
        - Title.astro
      - pages/
    

    </FileTree>
    Aperçu
    • astro.config.mjs
    • package.json
    • Répertoiresrc
      • Répertoirecomponents
        • Header.astro
        • Title.astro
      • Répertoirepages/
        • …

    Mettre en évidence les entrées

    Section intitulée « Mettre en évidence les entrées »

    Faites ressortir un fichier ou un répertoire en mettant son nom en gras, par exemple **README.md**.

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

    <FileTree>
    

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

    </FileTree>
    Aperçu
    • Répertoiresrc
      • Répertoirecomponents
        • Header.astro
        • Title.astro

    Ajouter des commentaires

    Section intitulée « Ajouter des commentaires »

    Ajoutez un commentaire à un fichier ou à un répertoire en ajoutant du texte après le nom. La syntaxe de mise en forme Markdown, telle que le gras et l’italique, est prise en charge dans les commentaires.

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

    <FileTree>
    

    - src
      - components
        - Header.astro un fichier **important**
        - Title.astro
    

    </FileTree>
    Aperçu
    • Répertoiresrc
      • Répertoirecomponents
        • Header.astro un fichier important
        • Title.astro

    Ajouter des entrées fictives

    Section intitulée « Ajouter des entrées fictives »

    Ajoutez des fichiers et des répertoires fictifs en utilisant soit ... soit … comme nom. Cela peut être utile pour indiquer à un lecteur qu’un dossier est censé contenir plus d’éléments sans les spécifier tous explicitement.

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

    <FileTree>
    

    - src
      - components
        - Header.astro
        - …
    

    </FileTree>
    Aperçu
    • Répertoiresrc
      • Répertoirecomponents
        • Header.astro
        • …

    Props de <FileTree>

    Section intitulée « Props de <FileTree> »

    Implémentation : FileTree.astro

    Le composant <FileTree> n’accepte aucune props.