`<FileTree>` Component

一个用于可视化展示文件树的内置组件。

示例

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

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

用法

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

MDX


import { FileTree } from 'nextra/components'
 
<FileTree>
  <FileTree.Folder name="content" 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>

<FileTree> Component

示例

用法

`<FileTree>` Component