> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification. > > GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiIxOGEzNTdiZi04ZjZiLTQ4NDUtYTc1Yy02OTkwYTNmOGFjYzkiLCJleHAiOjE3NzgyNjQyNDAsImlhdCI6MTc3ODI2Mzk0MH0.cU7jW_Dk6WSnzsWQ_Wyi9TnnQOH8y1QNSBNX98Uw2GA > > For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt. # Files > 显示带有可展开文件夹的交互式文件树结构 `` 组件创建可视化的文件树结构，具有可展开的文件夹和嵌套文件。使用它来展示项目结构、目录布局或文档中的任何层次文件组织。 该组件由三部分组成：`` 作为容器，`` 用于目录，`` 用于单个文件。 ## 使用方法
```jsx Markdown maxLines=10 ``` ## 变体 ### 嵌套文件夹 您可以在文件夹中嵌套文件夹来创建深层目录结构。组件会自动添加可视化嵌套线来显示层次结构。
```jsx Markdown maxLines=10 ``` ### 链接文件和文件夹 添加 `href` 属性以使文件或文件夹可点击。这对于链接到文档页面、GitHub 仓库或其他资源很有用。带有 `href` 属性的文件和文件夹会显示下划线。
```jsx Markdown maxLines=10 ``` ### 默认打开的文件夹 使用 `defaultOpen` 属性让特定文件夹在页面加载时展开。这对于突出显示重要目录或展示文件结构最相关的部分很有用。
```jsx Markdown maxLines=10 ``` ### 行高亮和注释 使用 `highlighted` 属性来高亮显示特定的文件或文件夹，以强调背景颜色。使用 `comment` 属性添加出现在项目旁边的解释性文本。这些属性对于引起对重要文件的注意或提供额外上下文很有用，类似于代码块支持[行高亮](/learn/docs/writing-content/components/code-blocks#line-highlighting)和内联注释。
```jsx Markdown maxLines=10 ``` ## 属性 ### `` 属性 文件树内容。应包含 `` 和 `` 组件。 用于自定义样式的可选 CSS 类名。 ### `` 属性 要显示的文件夹名称。 页面加载时文件夹是否应该展开。如果未指定，文件夹默认为折叠状态。 文件夹内的嵌套内容。可以包括 `` 和其他 `` 组件。 使文件夹名称可点击的可选 URL。提供链接时名称会显示下划线。 包含文件夹的行是否应该用强调背景颜色进行可视化高亮。使用此功能来引起对重要目录的注意。 出现在文件夹名称旁边的可选注释文本。注释如果还没有 `#` 前缀会自动添加，并以等宽字体和弱化颜色样式显示。 用于自定义样式的可选 CSS 类名。 ### `` 属性 要显示的文件名。 使文件名可点击的可选 URL。提供链接时名称会显示下划线。 包含文件的行是否应该用强调背景颜色进行可视化高亮。使用此功能来引起对重要文件的注意。 出现在文件名旁边的可选注释文本。注释如果还没有 `#` 前缀会自动添加，并以等宽字体和弱化颜色样式显示。 用于自定义样式的可选 CSS 类名。