ドキュメント索引

グループ別の項目

ガイドでの使用

使用箇所： the Guide index.

使い方とインターフェース

DocumentationIndex は大きなカタログをセクション、カテゴリ、文字で整理し、Guide と Reference の入口を構成します。学習経路には十分な説明を、名前で調べる API やユーティリティには簡潔なリンク一覧を使います。どちらの表示も同じ移動先を含みます。

各セクションに安定した id、タイトル、説明、groups を指定し、並び順で番号を付けます。複数カテゴリを持つグループには、セクション見出しの横にネイティブのアンカーショートカットを設けます。並べ替えても共有 URL が変わらないよう、グループにも固有の安定した id を指定します。showDescriptions は要約を省略せず、折り返して表示します。既定では簡潔なリンクを使い、related で別のカタログへのリンクを指定します。

<DocumentationIndex  name="guide"  sections={[{    id: 'learn', title: 'Learn',    description: 'Start with a working example.',    groups: [{ entries: [{      id: 'intro', title: 'Introduction', category: 'Guide',      description: 'Write your first classes.',      url: 'https://rc.css.master.co/guide/introduction',    }] }],  }]}  showDescriptions  related={{ href: 'https://rc.css.master.co/reference', title: 'Reference',    description: 'Look up a utility.' }}/>

カタログはカードの格子ではなく、本の目次のように読める構成です。細線上の番号付きセクション一覧を相互リンクで締め、続く各セクションを罫線のある見開きのように配置します。44rem以上では番号、名前、要約が項目の横に残ります。説明付き項目は罫線で区切る行とホバー時の矢印、簡潔なリンクは列、A–Z 表示は索引のような文字別の列を使います。囲み枠は使わず、スマートフォンのタッチ行は44pxを保ちます。独自のコンテナーと列構成を持つので、測定デモの外、本文の列に配置します。カテゴリと A–Z の切り替えは押下状態付きのネイティブボタンです。文字とカテゴリのショートカットは、直接移動用 URL としても使える実際のフラグメントリンクです。公開カタログでは既存アンカーを保つため idPrefix を省き、1つのレビューページに複数を表示する場合だけ異なる接頭辞を設定します。カテゴリ表示の全体はサーバーレンダリングの HTML に含まれ、A–Z 切り替えには JavaScript が必要です。索引のレビューで現在のカタログを確認できます。