logo
导航

TableOfContents

The TableOfContents component is used to display the heading structure of page content, automatically detecting heading elements, generating a table of contents list, and highlighting the currently visible heading as the user scrolls.

Basic Usage

---
/**
 * @component TableOfContentsBasic
 * @description TableOfContents 组件基础用法示例
 */
import { TableOfContents } from '@coffic/cosy-ui';
---

<TableOfContents />

Custom Usage

---
/**
 * @component TableOfContentsCustom
 * @description TableOfContents 组件自定义用法示例
 */
import { TableOfContents } from '@coffic/cosy-ui';
---

<TableOfContents title="章节导航" selector="h2, h3, h4" maxDepth={4} />