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 しない。 |
| active | Option<usize> | None | 現在ページの添字。None・範囲外・ギャップを指す添字のときはどのセルにも選択インジケータを付けない。 |
| prev_next | bool | false | 前/次への送りコントロール(キャレットアイコン 1 個ずつ)を表示するか。 |
| first_last | bool | false | 先頭/末尾への送りコントロール(キャレットアイコン 2 個ずつ)を表示するか。 |
| size | Size | Size::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 に非掲載と確定しています。本ページも画像は置かず、上記の外部リンクのみで代替します。