Pagination

fandhe-frontend-pre-styled-ui の pagination mod が提供するスタイル済み Pagination 部品です。

ページ番号によるナビゲーション部品です。item は data-selected マーカー + aria-current="page" で現在ページを表し、root のみへ variant クラスが付く複合部品の統一方針に従います。1 件ずつの切り替えには Carousel を検討してください。root_with を使うとページボタンを隙間なく横一列に連結する Attached variant を opt-in で指定できます。

Demo

総件数・ページサイズ・現在ページから省略記号（ellipsis）を含むページ列を決定的に導出する headless Pagination の静的掲示。現在ページは aria-current="page"/data-selected で、端到達は prev/next の disabled で表現します（クリック挙動は wasm 層のスコープ外）。

Features

item は data-selected マーカー + aria-current="page" で現在ページを表す（crates/pre-styled-ui/src/pagination.rs:35-38）
item 自体には class を付与しない（root のみへクラスが付く複合部品の variant 統一方針、pagination.rs テスト reexported_item_is_not_given_variant_classes）
root は <nav> 要素として出力される（pagination.rs テスト root_outputs_scope_and_part）
root_with 経由で attached variant（PaginationVariant、ページボタンを隙間なく横一列に連結する見た目）を opt-in 提供（イシュー #3136、pagination.rs 参照）

Anatomy

root
  prev-trigger
  item
  ellipsis
  next-trigger

API Reference

Arguments

Name	Type	Default	Description
`palette`	`ColorPalette`	`Accent`	colorPalette 軸（pagination.rs:447-460）。
`aria_label`	`&str`	(必須)	root（nav）の aria-label（pagination.rs:447-460, 528-534）。
`variant`	`PaginationVariant`	`Separated`	root_with のみが受け取る連結表示 variant（Separated/Attached、イシュー #3136、pagination.rs 参照）。

Data Attributes

Part	Attribute	Observed Values
`item`	`data-index`	`1`, `10`, `11`, `20`, `9`
`item`	`data-selected`	（値なし）

CSS Variables

Variable	Default
`--fandhe-pagination-item-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-pagination-item-size`	`2rem`

Examples

Current page

選択中ページ 1 件のみを表示する最小構成例です。

Prev/Next with label

shadcn/ui の「‹ Previous」「Next ›」表示を、prev_trigger/next_trigger へ単一テキストノードを渡すだけで再現する例です（イシュー #2036）。

Rows per page + Select

shadcn/ui のデータテーブル用フッター（Rows per page ラベル付き Select + Prev/Next のみ、ページ番号なし）を既存部品の組み合わせで再現する例です（イシュー #2036）。

Rows per page

Attached

root_with で PaginationVariant::Attached を指定した例です（イシュー #3136、ページボタンを隙間なく横一列に連結する見た目）。

Accessibility

WAI-ARIA

Attribute	Description
aria-current="page"（選択中 item） / data-selected	現在ページを示すマーカー（pagination.rs:35-38）。root（nav）は呼び出し側指定の aria-label を持つ。