Pagination

総件数からページ番号列（省略記号を含む）を決定的に導出するページ送りです。fandhe-frontend-headless-ui の pagination mod が構造・アクセシビリティ（WAI-ARIA・キーボード操作）・表示状態（data-*）のみを提供する unstyled 部品であり、Themes 版と異なりスタイル（CSS）は一切持ちません。クリックで dispatch する Button モードと、href 遷移の Link モードの両方に対応します。

スタイル済みの表示例は Pagination を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Features

ページ送り。Root / Item / Ellipsis / PrevTrigger / NextTrigger の 5 anatomy パーツを持つ（pagination.rs モジュール doc）。
page_range は総件数・ページサイズ・現在ページ・sibling/boundary 件数から省略記号を含むページ列を O(boundary_count + sibling_count) で決定的に導出する純粋関数（total_pages を全列挙しないため巨大 count 入力でも有界、DoS 対策）。
Button（クリックで dispatch する SPA 向け）/ Link（href 起点の SSR・SEO 向け）の 2 つの ItemMode に両対応する。
data-state を持たない（連続的なページ位置を扱うため）。現在ページは item の aria-current="page"/data-selected、端到達は prev_trigger/next_trigger の disabled/data-disabled で表現する。

Anatomy

root
  prev-trigger
  item
  ellipsis
  next-trigger

API Reference

Arguments

Name	Type	Description
root(aria_label)	&str	root（nav）へ付与する aria-label。既定値相当は呼び出し側が明示指定する契約。
item(mode)	ItemMode	Button（button type="button"）/ Link（a href）のいずれで描画するかを選ぶ。
item(current)	bool	true のとき aria-current="page"+data-selected を付与する。
item(disabled)	bool	Button モードのみネイティブ disabled を出力。両モード共通で aria-disabled/data-disabled を出力する。

Data Attributes

Part	Attribute	Observed Values
item	data-selected

Examples

ItemMode::Link のみで構成した SSR/SEO 向けページ送り

全パーツを ItemMode::Link に統一し、href 遷移によるページ送りを実演します。

Accessibility

WAI-ARIA

Attribute	Description
aria-current="page" / data-selected	item に付与（current が true のときのみ）。
aria-hidden="true"	ellipsis に固定付与。
aria-disabled	item/prev-trigger/next-trigger に付与（disabled が true のときのみ）。Button モードのみ併せてネイティブ disabled を出力する。