檔案樹元件

一個內建元件，用於視覺化呈現檔案樹。

範例

點擊資料夾以測試檔案樹的動態功能。

- _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>

步驟進階