文章目录 TableOfContents

<nav aria-label="本文目录"><p class="xxd-toc__title">本文</p>
<ul class="xxd-toc" data-spy>
  <li><a href="#demo" aria-current="true">演示</a></li>
  <li data-depth="3"><a href="#props">属性与类名</a></li>
  <li><a href="#rules">规则</a></li>
</ul></nav>

export function TableOfContentsDemo() {
  return (
    <TableOfContents>
      <TableOfContents.Title>本文</TableOfContents.Title>
      <TableOfContents.List>
        {["演示", "属性与类名", "规则"].map((t) => (
          <TableOfContents.Item key={t} active={t === "演示"}>
            {t}
          </TableOfContents.Item>
        ))}
      </TableOfContents.List>
    </TableOfContents>
  );
}