Bulmaのページネーション Pagination [CSSフレームワーク]

Bulma ロゴ トップ バナー

Webページでは、table要素などを使用してデータを表形式のリストで表示することがあります。
表示するデータ(行)の件数が少なければ、すべてのデータを表示しても問題にはなりませんが、データの件数が多い場合は画面上のレイアウトや読み込みのパフォーマンス等の問題がありますので、データをいくつかのページに分割(ページング)して表示したい時があります。

ページングすることで、ユーザーが一度に扱いやすい量のデータをページごとに区切って表示することができます。

Bulmaにはページングを行った時に

  • 全体でどれくらいのページがあるのかを表示する
  • 現時点ではどのページが表示されているのかを表示する
  • ユーザー表示させるページを選択させる

などの機能を実装するためのページネーションを作成するためのクラスが用意されています。

今回は、ページネーションを簡単に配置できるpaginationクラスを紹介します。

応答性が高く使いやすい柔軟なページ付けができるpaginationクラス

paginationクラスを使うと、テーブル(表)やリストなどのページングしたい要素の上または下に、ページ番号のついたボタンを配置できます。

ページネーションのボタンサンプル

paginationクラスとサブクラス

paginationクラスを使用してページネーションのスタイルを設定する際は、paginationクラスを指定した要素の子要素に

  • 前のページに移動するボタン
  • 次のページに移動するボタン
  • 各ページに移動するボタンのリスト

を配置するためのクラスを指定します。

前のページに移動するボタンの要素には、pagination-previousクラスを指定します。
次のページに移動するボタンの要素には、pagination-nextクラスを指定します。
各ページに移動するボタンのリストの要素には、pagination-listクラスを指定します。

HTML

各ページに移動するボタンのリストには、ページ番号のボタンを配置します。
ページ番号のボタンの要素には、pagination-linkクラスを指定します。

HTML

ブラウザーでの表示
Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

ページ番号の数が多く一度に配置できない場合は、途中のページ番号を省略するための記号「…(エスケープ文字の…)」を表示することができます。

ページ番号の省略を表す要素には、pagination-ellipsisクラスを指定します。

HTML

ブラウザーでの表示
Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

ページネーションのボタンは、画面のサイズ(横幅)によって配置が変化します。

Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

現在のページ番号を強調する

Bulmaのページネーションでは、現在のページ番号のボタンを強調してユーザーに知らせるためのクラスが用意されています。

Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

特定のページ番号を強調する際は、強調する番号のボタン(上記の例ではa要素)に、is-currentクラスを指定します。
ここでは、13ページ目のボタンを強調しています。

ボタンの無効化

ページャーに配置するボタンは無効にすることができます。
disabled属性を指定して無効にしたボタンは、次のように表示されます。

Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

ここでは、4ページ目のボタンと前のページへ移動するボタンを無効にしています。

ボタンの配置

通常(デフォルト)では、ページ番号のボタンが左寄せで配置されますが、ページ番号のボタンの位置は、中央や右寄せで配置できます。
ページ番号のボタンの表示位置を中央や右寄せにする場合は、paginationクラスを指定している要素にクラスの指定を追加します。

中央に配置する場合は、is-centeredクラスを追加で指定します。

HTML

ブラウザーでの表示
Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

右に配置する場合は、is-rightクラスを追加で指定します。

HTML

ブラウザーでの表示
Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

ボタンのスタイルを丸くする

ページ番号のボタン、前のページへ移動するボタン、次のページへ移動するボタンは、丸くすることができます。
丸いボタンのスタイルにする場合は、paginationクラスを指定している要素にis-roundedクラスを追加で指定します。

HTML

ブラウザーでの表示
Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

ページネーションのサイズ

ページネーションのサイズは、通常サイズの他に小サイズ、中サイズ、大サイズの3つが用意されています。
サイズを変更する場合は、paginationクラスを指定している要素にサイズのクラスを追加で指定します。

小サイズ

小さいサイズにする場合は、is-smallクラスを指定します。

HTML

ブラウザーでの表示
Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

中サイズ

中くらいのサイズにする場合は、is-mediumクラスを指定します。

HTML

ブラウザーでの表示
Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

大サイズ

大きいサイズにする場合は、is-largeクラスを指定します。

HTML

ブラウザーでの表示
Bulmaのpaginationクラスとサブクラスの実装サンプルをブラウザーで実行した結果

HTML

Bulma 入門 Tips 一覧