DDS

ページネーション

Figmaに未定義(参考実装)

コンテンツを複数ページに分割してナビゲーションを提供するコンポーネント

デフォルト

最初/最後へのジャンプ、前後ナビゲーション、ページ番号を含む標準的なページネーション。

Open in StackBlitz

最初/最後ボタンなし

シンプルな前後ナビゲーションとページ番号のみ。

Open in StackBlitz

シンプル

前へ/次へボタンとページ情報のみのシンプルなバリエーション。

5 / 10
Open in StackBlitz

ミニマル

最小限のスペースで表示するコンパクトなバリエーション。

Page 5 of 10
Open in StackBlitz

サイズ

3つのサイズバリエーション:Small、Medium、Large。

Small
Medium
Large
Open in StackBlitz
DOs
  • 現在のページを明確にハイライトする
  • 総ページ数を表示する
  • キーボードナビゲーションをサポートする
  • ページ数が多い場合は省略記号(...)を使用する
DON'Ts
  • すべてのページ番号を表示しない(多すぎる場合)
  • 現在のページでも前へ/次へボタンを無効化しない設計
  • タッチデバイスでタップしにくい小さすぎるボタン
  • ページ変更時にスクロール位置をリセットしない