kaminariを導入して、カスタムテーマを設定してみました
Railsアプリケーションの一覧表示画面でページネーションを行う場合、いくつかgemの選択肢があると思いますがこの度 kaminari を導入し、表示部分のカスタマイズを行ってみましたのでご紹介いたします。
導入手順はkaminariのサイトにも記載されています。
ドキュメントのviewのカスタマイズを参考にしてもらえればと思います。
Bootstrap用のテーマは用意されているようなのですが、今回利用しているCSSフレームワークがUIkitなので、カスタムテーマを適用してみます。
まずは、ドキュメントに記載の通り、デフォルトのviewを生成します。
app/views/kaminari
ディレクトリが生成され、その中にテンプレートのerbファイルが生成されますので、更にカスタムテーマ用のテンプレートファイルのためのディレクトリを作成します。
今回はapp/views/kaminari/rc\_custom\_theme
というディレクトリにしました。その中に生成されたerbファイルをコピーしておきます。
ちなみにhaml等別のフォーマットにも対応しているようなのですが、今回はerbで行っています。
UIkitのcoreにpagination用のスタイルが用意されています。こちらを参考
kaminariで生成されるページネーションのHTMLは次のようになっています。
UKkitでは次のように設定する必要があります。
上記のように、タグとスタイルのclassの指定を変更しています。
先頭ページ、前のページ、ページ番号を表示するテンプレートなどに分かれていますので、それぞれのファイルを変更しました。
ページのテンプレートにはli
タグの内側にspan
タグが必要になります。
これはclassにuk-active
を設定した際、ハイライトさせるためです。
続いて、一覧画面のviewを変更します。
上記のようにpaginateの引数に、オプションtheme
を追加しました。
こんな感じで仕上がりました。