Caroa UI

Table of Contents

ページ内の目次。点線が上から選んでいる節まで伸び、届いたところで先がフックの形に曲がって項目へ入る。

インポート

import { TableOfContents } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

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

記事・ヘルプ・設定の長いページで、節へ移る目次に使います。

基本的な使い方

項目を押すと、点線が新しい節の高さまで伸び縮みし、届いたところで先がくるっと曲がって項目へ入ります。触れた項目には、薄い線が上から伸びて先回りし、離れると縮んで消えます。depthを付けた小見出しは右へ下げ、フックも長く伸ばします。

Loading...
<TableOfContents
  heading="目次"
  items={[
    { id: 'intro', label: 'はじめに' },
    { id: 'history', label: '物語の背景' },
    { id: 'cast', label: '登場人物', depth: 1 },
    { id: 'ticket', label: 'チケットと当日の流れ' },
  ]}
/>

スクロールに合わせる

hrefに#節のidを渡してtrackScrollを付けると、スクロールに合わせていま読んでいる節を選びます。節の上端が画面の上からscrollOffset（既定96px。固定ヘッダーの高さ分）を越えたら、その節を読んでいるとみなします。スクロールしてページの底まで来たら最後の節を選びます。

<TableOfContents
  heading="目次"
  trackScroll
  items={headings.map((heading) => ({
    id: heading.id,
    label: heading.text,
    href: `#${heading.id}`,
    depth: heading.level === 3 ? 1 : 0,
  }))}
/>

色と弾み方

線の色はvariantで選びます（baseは黒、primaryはブランド色）。縦の線が伸び縮みするときの弾み方はbounceで、Segmented Control・Tabsと同じ値を使います。動きを減らす設定（prefers-reduced-motion）の利用者には、動かさずに切り替えます。

Loading...
const [value, setValue] = useState('cast')

<TableOfContents items={items} value={value} onValueChange={setValue} variant="primary" bounce="medium" />

Props

PropTypeDefaultDescription
items{ id: string; label: ReactNode; href?: string; depth?: 0 | 1 | 2; disabled?: boolean }[]-目次の項目（必須）。hrefがあればリンク、なければボタン
headingReactNode-一覧の上の小さな見出し
valuestring-選んでいる項目のid（制御コンポーネント）
defaultValuestring最初の項目初期値（非制御コンポーネント）
onValueChange(id: string) => void-選び直したとき（押したとき・スクロールで節が変わったとき）
trackScrollbooleanfalseスクロールに合わせていま読んでいる節を選ぶ
scrollOffsetnumber96節を読んでいるとみなす、画面の上からの距離（px）
variant'base' | 'primary''base'線の色
bounce'none' | 'subtle' | 'medium' | 'strong''subtle'線が伸び縮みするときの弾み方

Table

テーブルコンポーネント。

Tabs

タブ切り替えコンポーネント。

On this page

インポート基本的な使い方スクロールに合わせる色と弾み方Props