目录
目录
带有活动锚点监视器和自动滚动的目录表。
🌐 A Table of Contents with active anchor observer and auto scroll.
使用
🌐 Usage
import * as Base from 'fumadocs-core/toc';
return (
<Base.AnchorProvider>
<Base.ScrollProvider>
<Base.TOCItem />
<Base.TOCItem />
</Base.ScrollProvider>
</Base.AnchorProvider>
);锚点提供者
🌐 Anchor Provider
使用 Intersection Observer API 监听活动锚点。
🌐 Watches for the active anchor using the Intersection Observer API.
Prop
Type
滚动提供者
🌐 Scroll Provider
将滚动容器滚动到活动锚点。
🌐 Scrolls the scroll container to the active anchor.
Prop
Type
目录项
🌐 TOC Item
用于跳转到目标锚点的锚点项。
🌐 An anchor item for jumping to the target anchor.
| 数据属性 | 值 | 描述 |
|---|---|---|
data-active | true, false | 锚点是否激活 |
例子
🌐 Example
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>
);
}Last updated on