# Fumadocs Core (the core library of Fumadocs): 目錄
URL: /zh-TW/docs/headless/components/toc
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/headless/components/toc.zh-TW.mdx

目錄

具備作用中錨點偵測與自動捲動功能的目錄。

## 使用方式 [#usage]

```tsx
import * as Base from 'fumadocs-core/toc';

return (
  <Base.AnchorProvider>
    <Base.ScrollProvider>
      <Base.TOCItem />
      <Base.TOCItem />
    </Base.ScrollProvider>
  </Base.AnchorProvider>
);
```

### Anchor Provider [#anchor-provider]

透過 Intersection Observer API 追蹤目前作用中的錨點。

### AnchorProviderProps

| Prop        | Type                   | Description                                          |
| ----------- | ---------------------- | ---------------------------------------------------- |
| `toc`       | `TOC.TOCItemType[]`    |                                                      |
| `single?`   | `boolean \| undefined` | Only accept one active item at most Default: `false` |
| `children?` | `React.ReactNode`      |                                                      |

### Scroll Provider [#scroll-provider]

將捲動容器捲動至目前作用中的錨點。

### ScrollProviderProps

| Prop           | Type                                   | Description                                   |
| -------------- | -------------------------------------- | --------------------------------------------- |
| `containerRef` | `React.RefObject<HTMLElement \| null>` | Scroll into the view of container when active |
| `children?`    | `React.ReactNode`                      |                                               |

### 目錄項目 [#toc-item]

用於跳至目標錨點的錨點項目。

| 資料屬性          | 值             | 說明          |
| ------------- | ------------- | ----------- |
| `data-active` | `true, false` | 錨點是否處於作用中狀態 |

## 範例 [#example]

```tsx
import { AnchorProvider, ScrollProvider, TOCItem, type TOCItemType } from 'fumadocs-core/toc';
import { type ReactNode, useRef } from 'react';

export function Page({ items, children }: { items: TOCItemType[]; children: ReactNode }) {
  const viewRef = useRef<HTMLDivElement>(null);

  return (
    <AnchorProvider toc={items}>
      <div ref={viewRef} className="overflow-auto">
        <ScrollProvider containerRef={viewRef}>
          {items.map((item) => (
            <TOCItem key={item.url} href={item.url}>
              {item.title}
            </TOCItem>
          ))}
        </ScrollProvider>
      </div>
      {children}
    </AnchorProvider>
  );
}
```