Ruby on Rails 【kaminari】ページネーションのデザイン変更 | Bulma


投稿日:2020年08月29日 (土)
当サイトのプロジェクトではページネーションの利用方法を取り上げています。
しかしデザインの変更について触れることができなかったのでここで解説します。

BulmaでWebアプリケーションを構築していることを前提としています。

kaminariをBulmaのスタイルで生成します。
rails g kaminari:views bulma


この時生成された「app/views/kaminari/_paginator.html.erb」ファイルを編集することでデザインを変更できます。
デザインのサンプルは以下のページにあります。
Bulmaページネーション

今回は丸型で大きさをmediumに設定しました。
navタグのclassに記述を追加します。
<nav class="pagination is-medium is-rounded">


「app/views/kaminari/_paginator.html.erb」ファイルを以下のように編集します。
<%
=begin

The container tag
- available local variables
  current_page : a page object for the currently displayed page
  total_pages  : total number of pages
  per_page     : number of items to fetch per page
  remote       : data-remote
  paginator    : the paginator that renders the pagination tags inside

=end
%>

<%= paginator.render do %>
  <nav class="pagination is-medium is-rounded">
    <%= prev_page_tag unless current_page.first? %>
    <%= next_page_tag unless current_page.last? %>
    <ul class="pagination-list">
      <%= first_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 %>
      <%= last_page_tag unless current_page.last? %>
    </ul>
  </nav>
<% end %>



これでページネーションのデザインが変更できます。

ページネーションデザイン変更.png 250KB



Rails6.0 Windows MacOSX

動画学習サイトの構築 Rails6.0

  0 (0)

タスク   128

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

民泊サイトの構築 Rails6.0

  0 (0)

タスク   128

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

動画学習サイトの構築 Rails5.0

  0 (0)

タスク   100

1,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails6.0 Windows MacOSX

お仕事売買サイトの構築 Rails6.0

  0 (0)

タスク   146

3,000円

    サンプルサイトは初期起動に15秒ほどかかります。

 
Rails5.0 Windows MacOSX

民泊サイトの構築 Rails5.0

  0 (0)

タスク   136

2,000円

    サンプルサイトは初期起動に15秒ほどかかります。