Closed super-appy closed 7 months ago
KaminariとTailwind CSSを組み合わせてページネーションをスタイリングするには、いくつかのステップを踏む必要があります。Kaminariはデフォルトのページネーションのビューを提供しますが、Tailwind CSSを適用するにはこれらのビューをカスタマイズすることが一般的です。
まず、Kaminariのページネーションビューをアプリケーションにコピーします。これにより、これらのビューをカスタマイズできるようになります。以下のコマンドを実行して、デフォルトのビューファイルを生成します。
rails g kaminari:views default
これにより、app/views/kaminari/
にページネーションに関連するビューファイルが生成されます。
次に、生成されたビューファイルにTailwind CSSのクラスを適用します。たとえば、_paginator.html.erb
ファイル内で、次のようにクラスを追加・変更することができます。
<nav class="flex justify-between items-center">
<%= first_page_tag unless current_page.first? %>
<%= prev_page_tag unless current_page.first? %>
<ul class="flex list-none">
<% each_page do |page| %>
<% if page.left_outer? || page.right_outer? || page.inside_window? %>
<li><%= page_tag page %></li>
<% elsif !page.was_truncated? %>
<li>...</li>
<% end %>
<% end %>
</ul>
<%= next_page_tag unless current_page.last? %>
<%= last_page_tag unless current_page.last? %>
</nav>
この例では、nav
要素に flex
, justify-between
, items-center
などのTailwind CSSのクラスを追加しています。他の要素にも同様に、必要なスタイリングを適用してください。
変更後、ビューが期待通りに表示されるかどうかを確認します。アプリケーションを実行し、ページネーションが適切にスタイリングされていることを確認してください。
これらのステップに従って、KaminariのページネーションにTailwind CSSのスタイルを適用することができます。
kaminarinのファイルがみんなパーシャルだったので、それぞれにCSS当てた
kaminari で実装 https://www.notion.so/17_-565434e1b9284a76833b5958b71e4156