文件树组件

一个内置组件，用于直观地表示文件树。

示例

点击文件夹以测试文件树的动态功能。

- _meta.js
- contact.md
- index.mdx

用法

通过在 <FileTree> 内嵌套 <FileTree.Folder> 和 <FileTree.File> 组件来创建文件树结构。使用 name 属性为每个文件或文件夹命名。使用 defaultOpen 设置加载时要打开的文件夹。

MDX

import { FileTree } from 'nextra/components'
 
<FileTree>
  <FileTree.Folder name="pages" defaultOpen>
    <FileTree.File name="_meta.js" />
    <FileTree.File name="contact.md" />
    <FileTree.File name="index.mdx" />
    <FileTree.Folder name="about">
      <FileTree.File name="_meta.js" />
      <FileTree.File name="legal.md" />
      <FileTree.File name="index.mdx" />
    </FileTree.Folder>
  </FileTree.Folder>
</FileTree>

步骤高级