ドキュメントページャーDocumentPagerExperimental

前後のドキュメントへ移動するためのナビゲーションです。

プレビュー

状態とバリエーション

前後リンク

章やコンポーネントの前後を、概要とサムネイル付きで移動できます。

先頭ページ

前のページがない場合は previous に null を渡し、次のリンクだけを表示します。

末尾ページ

次のページがない場合は next に null を渡します。

サムネイルなし

サムネイル画像は任意です。指定しない場合は画像枠ごと表示しません。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
previousDocumentPagerItem | null-前のドキュメント。null の場合は前リンクを表示しません。
nextDocumentPagerItem | null-次のドキュメント。null の場合は次リンクを表示しません。
linkComponentReact.ElementType-Next.js Link など任意のリンクコンポーネント。
classNamestring-ナビゲーション本体に追加するクラス名。

使い方

import { DocumentPager } from "@gunjo/ui"

export function ArticlePager() {
  return (
    <DocumentPager
      aria-label="前後のドキュメント"
      previous={{
        href: "/docs/components/command-palette",
        directionLabel: "前へ",
        title: "コマンドパレット",
        subtitle: "CommandPalette",
        description: "ナビゲーションやアクション用のグローバルコマンドパレットです。",
        categoryLabel: "ナビゲーション",
        thumbnailSrc: "/showcase-thumbs/command-palette.light.png",
        thumbnailAlt: "コマンドパレットのプレビュー",
        thumbnailFallback: "プレビュー",
      }}
      next={{
        href: "/docs/components/footer",
        directionLabel: "次へ",
        title: "フッター",
        subtitle: "Footer",
        description: "ページ下部にリンク群や補足情報をまとめて表示します。",
        categoryLabel: "ナビゲーション",
        thumbnailSrc: "/showcase-thumbs/footer.light.png",
        thumbnailAlt: "フッターのプレビュー",
        thumbnailFallback: "プレビュー",
      }}
    />
  )
}

使用コンポーネント

DocumentPager

関連コンポーネント

PaginationBreadcrumbNavigationMenu