Skip to content
fandhe-frontendcore v0.4.3
GitHub

Pagination

fandhe-frontend-wireframe-ui のページネーション風プレースホルダーです。「前へ/次へ・ページ番号の並び・省略記号(…)・現在ページの強調」という配置イメージだけを示す非インタラクティブな部品です。API は pagination(pages, active, prev_next, first_last, size) の 5 引数(詳細は下の引数表を参照)で、props 構造体は導入していません。

視覚的な参照元は blocks.pm の Pagination 部品ですが、ライセンス上の理由によりスクリーンショットは掲載していません(詳細は docs/design/wireframe-ui-architecture.md §2)。参照したい場合は外部リンク先を直接確認してください。

「Pagination」という名前ですが、<nav>/<a>/href/<button> のいずれも出力しない表示専用プレースホルダーです。実際にページ送りできる部品が必要な場合は Pagination(Themes) / Pagination(Primitives) を検討してください。

Demo

既定(コントロールなし・2 ページ目を選択中)

121617

前後 + 先頭/末尾コントロールあり

121617

前後コントロールのみ

121617

選択なし

121617

Sm

121617

Lg

121617

引数表

引数型既定値説明
pages&[Option<&str>]-ページ項目列。Some(label) はページ番号セル、None は省略記号(…)のギャップセル。空スライスでも panic しない。
activeOption<usize>None現在ページの添字。None・範囲外・ギャップを指す添字のときはどのセルにも選択インジケータを付けない。
prev_nextboolfalse前/次への送りコントロール(キャレットアイコン 1 個ずつ)を表示するか。
first_lastboolfalse先頭/末尾への送りコントロール(キャレットアイコン 2 個ずつ)を表示するか。
sizeSizeSize::Mdサイズ段階(xs〜xl)。フォントサイズ・アイコンサイズに反映される。

原案差分メモ

  • div ルート・非対話制約: docs/design/wireframe-ui-architecture.md §7 に従い、ルートは div とし role/aria-*(アイコン基盤の装飾用 aria-hidden を除く)/tabindex/on* は一切出力しません。
  • ページ項目は &[Option<&str>]: Some(label) がページ番号セル、None が省略記号(…)のギャップセルを表します(calendar の Option<u32>(None = 空きマス)と同じ表現)。利用者に "…" という文字列そのものを渡させると通常のページセル(枠線付き)として描画されてしまうため、ギャップは構造として区別しました。ページ番号の妥当性検証・現在ページ前後の自動省略計算はアプリケーションロジックとして責務外としています(docs/policy/intentional-non-adoption.md §3.25 と同じ判断軸)。
  • 選択状態は active: Option<usize> 1 引数で表す: tabs と同型の判断です。専用の Selected/Checked 型は新設せず、既存の共通型 Active は項目ごとの data-active 出力にのみ用います(radio/ tabs と同じ再利用判断)。None・範囲外・ギャップを指す添字は、どのセルにも選択インジケータを付けない決定的な挙動へ倒し、unwrap/ expect/panic は使いません。
  • 先頭/前/次/末尾コントロールは prev_next/first_last の 2 bool に畳む: blocks.pm の Figma プロパティが持つ 4 つの独立 bool(先頭/前/ 次/末尾)は実用上「前後」と「先頭末尾」の対で使われるため、2 引数へ畳みました(§6 の boolean 爆発の畳み込み)。新しい props 型・構造体は導入していません。片側だけの表示(例: 次のみ)が必要なケースは本部品の対象外です。
  • Orientation を持たない: ページ送りは水平のみのため、props.rs の doc が消費者として明記していない Orientation は必須引数に取っていません。Disabled/Bold/Primary、アイコン差し替えスロット、件数表示・ページサイズ選択も持ちません。
  • 黒塗り二値ではなくグレースケール: 現在ページは --fw-wire-ink・非選択ページは --fw-wire-ink-muted・現在ページの背景は --fw-wire-fill-subtle を使い、読みやすさを優先します(他の wireframe-ui 部品と同じ配色方針)。
  • スクリーンショット非掲載: docs/design/reference-screenshots/ への blocks.pm 画像取り込みは #2602 で fail-closed に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。