TOC
目录
带活跃锚点观察者和自动滚动的目录。
使用
import * as Base from 'fumadocs-core/toc';
return (
<Base.AnchorProvider>
<Base.ScrollProvider>
<Base.TOCItem />
<Base.TOCItem />
</Base.ScrollProvider>
</Base.AnchorProvider>
);锚点提供器
使用 Intersection Observer API 监视活跃锚点。
Prop
Type
滚动提供器
将滚动容器滚动到活跃锚点。
Prop
Type
目录项
用于跳转到目标锚点的锚点项。
| 数据属性 | 值 | 描述 |
|---|---|---|
data-active | true, false | 锚点是否活跃 |
示例
import { AnchorProvider, ScrollProvider, TOCItem } from 'fumadocs-core/toc';
import { type ReactNode, useRef } from 'react';
import type { TOCItemType } from 'fumadocs-core/server';
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>
);
}How is this guide?
Last updated on