Pagination

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

ページ番号によるナビゲーション部品です。item は data-selected マーカー + aria-current="page" で現在ページを表し、root のみへ variant クラスが付く複合部品の統一方針に従います。1 件ずつの切り替えには Carousel を検討してください。

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）

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）。

Data Attributes

Part	Attribute	Observed Values
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 件のみを表示する最小構成例です。

Accessibility

WAI-ARIA

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