【Rails】kaminariのページネーションのデザインをviewごとに変更する
はじめに
この記事の概要
こんにちは、株式会社TOKOSのたくまです！
今回はviewごとにkaminariを使用したページネーションのデザインを変更する方法について紹介します!
ページネーション実装時にkaminariを使用されている方も多いかと思います。
kaminariを使用することで簡単にページネーションを実装することは出来ますが、
例えば管理者側の画面とユーザー側の画面でデザインを変更したいと思うことはありませんか？
そんな時は、これから紹介する方法で簡単にデザインを変更することが出来ます！
基本的なページネーションの使い方や実装方法については、以下のサイトが参考になると思います。
kaminariの使い方を理解してページネーションを実装しよう
ページネーションを簡単に実装できるgemのkaminariの使い方を解説しています。この記事を読めば簡単にページネーションを実装することができるようになります。ページネーションのデザインや文字の変更方法などもこの記事で理解しておきましょう。
pikawaka.com対象読者
- kaminariを使用してページネーションを実装している方
- ページネーションのデザインを変更したい方
ページネーションのデザインを変更する
themeごとにディレクトリを作成する
kaminariは下記のtheme: 'user'のようにthemeを指定することでデザインを切り替えることが出来ます。
<div class="flex justify-end">
<%= paginate @model, theme: 'user' %>
</div>themeを使用するために、まずはkaminariディレクトリ内に使用したいthemeのディレクトリを画像のように作成しましょう！
theme内のファイルを編集する
themeのディレクトリを作成したら、その中にある各ファイルを表示させたいデザインになるように編集していきましょう！
編集する各ファイルについて、それぞれ説明していきます。
(今回表示している例ではTailwind CSSを使用してスタイルをあてています。)
_page.html.erb
ページネーションの番号を表示するファイルです。
if文で現在表示されているページ番号とそれ以外のページ番号が分かれています。別々のスタイルをあてることで、今はどのページを表示しているのか分かりやすくなります。
<% if page.current? %>
<li class="page current">
<%= link_to_if page.current?, page, url, {remote: remote, rel: page.rel, class: "block py-[9px] w-8 h-8 border text-xs text-red-500 font-bold text-center !leading-none" } %>
</li>
<% else %>
<li class="page">
<%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel, class: "block py-[9px] w-8 h-8 bg-white border text-xs text-red-500 font-bold text-center !leading-none" } %>
</li>
<% end %>_next_page.html.erb
次のページへ移行する右矢印などを表示するファイルです。
<li class="next">
<%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote, class: "block py-[8px] w-8 h-8 bg-white border text-xs text-console font-bold text-center !leading-none rounded-r-[3px]" %>
</li>_prev_page.html.erb
前のページへ移行する左矢印などを表示するファイルです。
<li class="prev">
<%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote, class: "block py-[8px] w-8 h-8 bg-white border text-xs text-console font-bold text-center !leading-none rounded-l-[3px]" %>
</li>_paginator.html.erb
各番号や矢印との間隔を調整するファイルです。
3行目のgap-x-1で間隔を指定しています。
<%= paginator.render do -%>
<nav class="pagination" role="navigation" aria-label="pager">
<ul class="flex gap-x-1">
<%= prev_page_tag unless current_page.first? %>
<% each_page do |page| -%>
<% if page.display_tag? -%>
<%= page_tag page %>
<% elsif !page.was_truncated? -%>
<%= gap_tag %>
<% end -%>
<% end -%>
<% unless current_page.out_of_range? %>
<%= next_page_tag unless current_page.last? %>
<% end %>
</ul>
</nav>
<% end -%>_gap.html.erb
ページ番号とページ番号の間の...を表示するファイルです。
<span class="page gap w-8 h-8 bg-white border text-center text-red-500"><%= t('views.pagination.truncate').html_safe %></span>最終的に表示されるページネーションがこちらです。
他にもデザインを作成したい場合は、同様の手順で作成してもらえればOKです！
表示する際は上記したように必ずthemeを指定することに注意してください。
おわりに
今回は、viewごとにkaminariを使用したページネーションのデザインを変更する方法について紹介しました！
themeごとにファイルを編集して、表示の際にthemeを指定するだけなので非常に簡単だと思います。
ページごとのデザインに統一性を持たせるため、ぜひ活用してみてください！
この記事を書いた人
