Zenn
🎉

Rails kaminariを使用したページネーションにBootstrapデザインを適用させる

2023/09/14に公開
Bootstrap
Rails
Kaminari
tech

前提環境

  • RoRプロジェクト
  • プロジェクトにBootstrapの環境が整っている
  • プロジェクトにkaminariでページネーションが生成できる環境が整っている

kaminariを用いたページネーションのソースはとてもシンプル

<%= paginate @pagination %>

このどこにBootstrapを適用させる余地があるんだ...と頭を2秒ほど抱えた。

kaminariにBootstrapを適用させる

Bootstrap用のViewテンプレートをジェネレートする

rails g kaminari:views bootstrap3
Running via Spring preloader in process 68165
      downloading app/views/kaminari/_first_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_first_page.html.erb
      downloading app/views/kaminari/_gap.html.erb from kaminari_themes...
      create  app/views/kaminari/_gap.html.erb
      downloading app/views/kaminari/_last_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_last_page.html.erb
      downloading app/views/kaminari/_next_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_next_page.html.erb
      downloading app/views/kaminari/_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_page.html.erb
      downloading app/views/kaminari/_paginator.html.erb from kaminari_themes...
      create  app/views/kaminari/_paginator.html.erb
      downloading app/views/kaminari/_prev_page.html.erb from kaminari_themes...
      create  app/views/kaminari/_prev_page.html.erb

テンプレートが作成される。

これだけ

一瞬で適用できた。

懸念点

逆にこのページだけBootstrapのデザイン使いたくないとなった時の対処方法が今の所わからない...

#参考サイト
http://morizyun.github.io/blog/kaminari-gem-paginator-rails/

Discussion