Перейти к содержимому
Starlight
Filters

    Дерево файлов

    Для отображения структуры каталога с иконками файлов и сворачиваемыми подкаталогами используйте компонент <FileTree>.

    Превью
    • astro.config.mjs — важный файл
    • package.json
    • README.md
    • Директорияsrc
      • Директорияcomponents
        • Header.astro
      • …
    • Директорияpages/
      • …

    Импорт

    Заголовок раздела «Импорт»
    import { FileTree } from '@astrojs/starlight/components';

    Использование

    Заголовок раздела «Использование»

    Отображайте дерево файлов с иконками файлов и сворачиваемыми подкаталогами с помощью компонента <FileTree>.

    Укажите структуру ваших файлов и каталогов с помощью неупорядоченного списка Markdown внутри <FileTree>. Создайте подкаталог с помощью вложенного списка или добавьте / в конец элемента списка, чтобы отобразить его как каталог без определённого содержимого.

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

    <FileTree>
    

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

    </FileTree>
    Превью
    • astro.config.mjs
    • package.json
    • Директорияsrc
      • Директорияcomponents
        • Header.astro
        • Title.astro
      • Директорияpages/
        • …

    Выделение элементов

    Заголовок раздела «Выделение элементов»

    Выделите файл или каталог, сделав его имя жирным, например: **README.md**.

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

    <FileTree>
    

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

    </FileTree>
    Превью
    • Директорияsrc
      • Директорияcomponents
        • Header.astro
        • Title.astro

    Добавление комментариев

    Заголовок раздела «Добавление комментариев»

    Добавьте комментарий к файлу или каталогу с помощью дополнительного текста после имени. В комментариях поддерживается встроенное форматирование Markdown, такое как полужирное и курсивное начертание.

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

    <FileTree>
    

    - src
      - components
        - Header.astro — **важный** файл
        - Title.astro
    

    </FileTree>
    Превью
    • Директорияsrc
      • Директорияcomponents
        • Header.astro — важный файл
        • Title.astro

    Добавление заглушек

    Заголовок раздела «Добавление заглушек»

    Добавьте заглушки файлов и каталогов, используя в качестве имени либо ..., либо _. Это может быть полезно для указания читателю, что папка должна содержать больше элементов, не указывая их все в явном виде.

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

    <FileTree>
    

    - src
      - components
        - Header.astro
        - …
    

    </FileTree>
    Превью
    • Директорияsrc
      • Директорияcomponents
        • Header.astro
        • …

    Параметры <FileTree>

    Заголовок раздела «Параметры <FileTree>»

    Реализация: FileTree.astro

    Компонент <FileTree> не принимает никаких параметров.