فهرست مطالب (TableOfContents)

معرفی

TableOfContents فهرست بخش‌های یک صفحهٔ بلند را کنار آن نشان می‌دهد و بخشی را که در حال خواندن است مشخص می‌کند. بخش در حال خواندن را با اسکرول دنبال می‌کند، فوکوس را به بخشی که به آن می‌رود می‌برد، و دو چیز دیگر دارد: ساخت فهرست از تیترهای h2/h3 محتوا با autoFrom، و نوار میزان خوانده‌شده با scrollProgress. جای آن اسلات aside قالب DetailPage یا CustomPage است. بدون عنوان (title={null}) همان فهرست بخش‌های درون صفحه است که تا 4.x SectionNavigator بود.

داخل ProductFrame صفحه در ناحیهٔ محتوای قاب اسکرول می‌شود، نه پنجره؛ فهرست از 7.9 همان ظرف را (با useFrameScroll) دنبال می‌کند و بخش در حال خواندن، پرش نرم و نوار scrollProgress درست کار می‌کنند. بیرون از قاب پنجره را دنبال می‌کند.

چه زمانی استفاده نکنیم:

• برای صفحه‌ای با دو سه بخش کوتاه — فهرست لازم نیست
• برای جابه‌جایی بین نماهای مختلف یک موجودیت — از Tabs استفاده کنید

استفاده

import { TableOfContents } from '@partodata/ui/table-of-contents'

ساخت خودکار از تیترها

تیتری که id ندارد یکی می‌گیرد (toc-1، …) و اگر محتوا بعداً بارگذاری شود فهرست به‌روز می‌شود.

const bodyRef = React.useRef<HTMLDivElement>(null)

<DetailPage
  title="گزارش ارزیابی"
  aside={<TableOfContents autoFrom={bodyRef} scrollProgress className="sticky top-4" />}
>
  <Prose ref={bodyRef} markdown={report.body} />
</DetailPage>

فهرست دستی

<TableOfContents
  items={[
    { id: 'summary', label: 'خلاصه' },
    { id: 'method', label: 'روش', level: 3 },
  ]}
/>

Props

TableOfContents

دسترسی‌پذیری

• فهرست یک nav با برچسب «فهرست مطالب» است و مدخل فعال aria-current دارد
• پرش به بخش، focus را به همان بخش می‌برد تا صفحه‌خوان آن را اعلام کند
• نوار پیشرفت برچسب «میزان خوانده‌شده» دارد

کامپوننت‌های مرتبط

• Prose — بدنهٔ متنی که تیترهایش فهرست را می‌سازند
• DetailPage — اسلات aside برای فهرست