ファイルツリーコンポーネント

ファイルツリーを視覚的に表現するための組み込みコンポーネント。

例

フォルダをクリックして、ファイルツリーの動的な機能をテストしてください。

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

ステップ高度な設定