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.
Import
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.
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>
{% filetree %}- src - components - **Header.astro** - Title.astro{% /filetree %}
Directorysrc
Directorycomponents
- Header.astro
- Title.astro
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>
{% filetree %}- src - components - Header.astro an **important** file - Title.astro{% /filetree %}
Directorysrc
Directorycomponents
- Header.astro an important file
- Title.astro
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>
{% filetree %}- src - components - Header.astro - …{% /filetree %}
Directorysrc
Directorycomponents
- Header.astro
- …
<FileTree>
Props
Implementation: FileTree.astro
The <FileTree>
component does not accept any props.