TableOfContents

ページの目次。今読んでいる見出しを示す

インポート

ts
import { TableOfContents } from '@k8ordo/ui';

使い方

見出しを { id, label, children? } の木で渡す。右の目次はこのページの見出しを指していて、スクロールすると今の見出しが動く。

tsx
<TableOfContents
  items={[
    { id: 'import', label: 'Import' },
    {
      id: 'usage',
      label: 'Usage',
      children: [{ id: 'active', label: 'How the current heading is chosen' }],
    },
    { id: 'props', label: 'Props' },
  ]}
/>

今の見出しの決め方

見出しの scroll-margin-block-start を読み取り位置にし、それを最後に越えた見出しを今の見出しにする。固定ヘッダーの高さを見出しの scroll-margin に指定すれば、目次から飛んだ見出しがそのまま今の見出しになる。文書の終わりまで来たら、最後の節が短くても最後の見出しにする。縦書きの文書では、vertical-rl なら右から左、vertical-lr なら左から右へ読む向きで決める。

Props

items
Type: readonly TableOfContentsItem[]
Default: -
label?
Type: string
Default: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLElement>

このコンポーネントが描画する文言（ラベルやプレースホルダーなど）は、propsで指定しないとき文言辞書から解決されます。差し替え方は次を参照してください: i18n

Components