Glass レイアウト

フローティング表示される半透明 (ガラス風) のパネルを軸に構成された Docs レイアウトです。サイドバーとヘッダーは固定のカラムではなく、角丸でぼかしの効いたサーフェスとしてコンテンツの上に重なって表示されます。

Glass Layout

nav

{ title }object

themeSwitch

{ enabled, mode }object

searchToggle

{ enabled }object

sidebar

{ collapsible }object

npx @fumadocs/cli@latest customize

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

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

import { DocsLayout } from 'fumadocs-ui/layouts/glass'; 
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/glass/page'; 

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

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

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

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

オプションは Docs レイアウト から継承されますが、いくつか細かな違いがあります。

• sidebar オプションはありません。Glass レイアウトは、デフォルトのレイアウトよりも設計上の制約が強くなっています。
• 追加のオプションがあります (以下を参照してください) 。

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

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

import { DocsLayout } from 'fumadocs-ui/layouts/glass';
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に質問 ボタンを表示できます。AI 検索ダイアログを制御するには、開閉状態と変更ハンドラーを含む aiChat オブジェクトを渡してください。レイアウトは、広い画面ではチャットの panel をページの横に配置し、小さい画面ではページに重ねてフローティング表示します。

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

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

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

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

他のレイアウトと同様に、Glass レイアウトには slots オプションがあり、共通のスロット (navTitle、themeSwitch、searchTrigger、languageSelect) に加えて、組み込みの header、sidebar、sidebarDrawer (モバイル) コンポーネントを上書きできます。

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

<DocsLayout
  slots={{
    header: MyHeader, 
  }}
  // ...
/>;