kaminariのページネーションにCSSを適用する

はじめに

本記事では、BootstrapなどのCSSフレームワークを使用しないで、kaminariのページネーションにスタイルを適用する例をご紹介します。

CSSを適用する

以下SCSS記法で記述しています。

app/aseets/stylesheets/application.scss

/* ページネーション */

.pagination{
    margin: 20px auto 0;
    width: 50%;
    display: flex;
    justify-content: center;
    span{
        text-align: center;
        width: 50px;
        :hover{
            background-color:#f3f3f3;
        }
        a{
            display: block;
            width: 100%;
            height: 100%;
            :hover{
                background-color: #f3f3f3;
              }
        }
    }
}

.current{
    color: #008CFF;
}

.gap{
    background-color: white !important;
}

UIを整える

ここで「next」と表示されている箇所を「>」に変更するなど、直感的なUIにしていきます。

app/config/locales/devise.ja.yml

ja:
  views:
    pagination:
      first: "«"
      last: "»"
      previous: "‹"
      next: "›"
      truncate: "..."

設定ファイルを変更する

設定ファイルを作成します。

$ rails g kaminari:config

config/initializer下に生成された設定ファイルを確認します。
コメントアウトでデフォルト値が記載されています。

config/initializers/kaminari_config.rb

# frozen_string_literal: true

Kaminari.configure do |config|
  # config.default_per_page = 25
  # config.max_per_page = nil
  # config.window = 4
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.max_pages = nil
  # config.params_on_first_page = false
end

筆者は以下のように変更しました。

config/initializers/kaminari_config.rb

# frozen_string_literal: true

Kaminari.configure do |config|
  config.default_per_page = 10
  # config.max_per_page = nil
  config.window = 2
  config.outer_window = 1
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
  # config.max_pages = nil
  # config.params_on_first_page = false
end

完成したページネーション

このようなスタイルを適用することができました！
お好みで色や配置などを変更していただけたらと思います！