Spacious レイアウト

<DocsLayout /> よりもゆったりとしたバージョンです。ページはサイドバーの横にあるインセットパネル内に配置され、ページ単位のアクションはパネルの上部に表示されます。

Spacious Layout

nav

{ title }object

themeSwitch

{ enabled, mode }object

searchToggle

{ enabled }object

npx @fumadocs/cli@latest customize

使い方アンカーリンクをコピー

fumadocs-ui/layouts/spacious を使用して、Spacious レイアウトを有効にします。

import { DocsLayout } from 'fumadocs-ui/layouts/spacious'; 
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout {...baseOptions()} tree={source.getPageTree()}>
      {children}
    </DocsLayout>
  );
}

ページの import も忘れずに更新してください。

import { ... } from 'fumadocs-ui/layouts/docs/page'; 
import { ... } from 'fumadocs-ui/layouts/spacious/page'; 

スタイルアンカーリンクをコピー

Glass レイアウトと同様に、Spacious レイアウトのスタイルは CSS プリセットに含まれていないため、このレイアウトを使用しない限り余分なコストはかかりません。Tailwind CSS ファイルでインポートしてください。

@import 'tailwindcss';
@import 'fumadocs-ui/css/generated/spacious.css';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

設定アンカーリンクをコピー

オプションは Docs レイアウト から継承されますが、以下の点が若干異なります。

• sidebar オプションは defaultOpenLevel と prefetch のみを受け付けます。サイドバーは常に折りたたみ可能です。
• 追加のオプションがあります(後述)。

レイアウトタブアンカーリンクをコピー

レイアウトタブは tabs prop で設定します。追加方法はリンク先のドキュメントを参照してください。タブはサイドバー上部のドロップダウンに表示されます。

import { DocsLayout } from 'fumadocs-ui/layouts/spacious';
import { baseOptions } from '@/lib/layout.shared';
import { source } from '@/lib/source';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      {...baseOptions()}
      tabs={
        {
          // タブをカスタマイズ
        }
      }
      tree={source.getPageTree()}
    >
      {children}
    </DocsLayout>
  );
}

AIチャットアンカーリンクをコピー

レイアウトに AIに質問 を表示するには、開閉状態と変更ハンドラーを含む aiChat オブジェクトを渡します。

panel オプションを指定すると、チャットパネルのレンダリングはレイアウト側で行われます。幅の広い画面ではページの横にドッキングされ(目次はページヘッダー内に移動します)、小さい画面ではページの上にフローティング表示されます。

'use client';
import { DocsLayout } from 'fumadocs-ui/layouts/spacious';
import { useState } from 'react';

export function Layout({ children }) {
  const [open, setOpen] = useState(false);

  return (
    <DocsLayout
      aiChat={{
        open,
        onOpenChange: setOpen,
        panel: <MyChat />,
      }}
      // ...
    >
      {children}
    </DocsLayout>
  );
}

スロットアンカーリンクをコピー

Spacious レイアウトでは、共通のスロット(navTitle、themeSwitch、searchTrigger、languageSelect)に加えて、各パーツを上書きするための slots オプションが用意されています。

import { DocsLayout } from 'fumadocs-ui/layouts/spacious';

<DocsLayout
  slots={{
    actions: MyActions, 
  }}
  // ...
/>;

Docs Pageアンカーリンクをコピー

ページコンポーネントは Docs Page とほぼ同じですが、いくつか違いがあります。

• 目次はデフォルトで block スタイルになります。
• tableOfContentPopover では、ページヘッダー内の目次ドロップダウンと、モバイル表示時の目次バーを設定します。
• slots.toc には、ページヘッダー内のドロップダウン用に dropdown コンポーネントを渡せます。
• container スロットはありません。