はじめに
本記事では、BootstrapなどのCSSフレームワークを使用しないで、kaminariのページネーションにスタイルを適用する例をご紹介します。
CSSを適用する
以下SCSS記法で記述しています。
app/aseets/stylesheets/custom.scss
/* ページネーション */
.pagination{
margin: 20px auto 0;
width: 50%;
display: flex;
justify-content: flex-start;
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
完成したページネーション
このようなスタイルを適用することができました！
お好みで色や配置などを変更していただけたらと思います！
↧