super-appy
commented
7 months ago KaminariとTailwind CSSを組み合わせてページネーションをスタイリングするには、いくつかのステップを踏む必要があります。Kaminariはデフォルトのページネーションのビューを提供しますが、Tailwind CSSを適用するにはこれらのビューをカスタマイズすることが一般的です。
ステップ 1: Kaminariのビューを生成
まず、Kaminariのページネーションビューをアプリケーションにコピーします。これにより、これらのビューをカスタマイズできるようになります。以下のコマンドを実行して、デフォルトのビューファイルを生成します。
rails g kaminari:views defaultこれにより、app/views/kaminari/ にページネーションに関連するビューファイルが生成されます。
ステップ 2: Tailwind CSSのスタイルを適用
次に、生成されたビューファイルに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のクラスを追加しています。他の要素にも同様に、必要なスタイリングを適用してください。
ステップ 3: ビューのテスト
変更後、ビューが期待通りに表示されるかどうかを確認します。アプリケーションを実行し、ページネーションが適切にスタイリングされていることを確認してください。
注意点
- Tailwind CSSのバージョンによって利用可能なクラスが異なる場合があるため、使用しているバージョンのドキュメントを確認してください。
- もしビューの変更が多くなる場合は、パーシャルビューを使用してコードを整理すると良いでしょう。
これらのステップに従って、KaminariのページネーションにTailwind CSSのスタイルを適用することができます。
kaminari で実装 https://www.notion.so/17_-565434e1b9284a76833b5958b71e4156