- 公開日：2016年04月13日
記事概要
KaminariライブラリでFoundation6に対応したviweを作成する方法をまとめた記事です。
環境
- rbenv
- bundler
- rails 4.2.5
- ruby 2.3.0
- kaminari 0.16.3
Kaminari
Kaminariはrailsでページング処理をおこなうライブラリです。
railsのデファクトのページングライブラリとして多くの人が利用しています。
Foundation6
人気のHTML templateフレームワークです。日本だと、Bootstrapの方が人気があります。
KaminariでFoundation6
Foundation6を利用してKaminariのデフォルトページング表示を利用すると、以下のような表示になります。
デザインの適用されないページングview
これではユーザーインターフェース的にユーザーが使いにくいので、デザインにkaminari_themesを適用します。
railsコマンドを利用して、以下のように導入します。
terminal
cd {project_folder}
bundle exec rails g kaminari:views foundation5
// result
downloading app/views/kaminari/_first_page.html.erb from kaminari_themes...
create app/views/kaminari/_first_page.html.erb
downloading app/views/kaminari/_gap.html.erb from kaminari_themes...
create app/views/kaminari/_gap.html.erb
downloading app/views/kaminari/_last_page.html.erb from kaminari_themes...
create app/views/kaminari/_last_page.html.erb
downloading app/views/kaminari/_next_page.html.erb from kaminari_themes...
create app/views/kaminari/_next_page.html.erb
downloading app/views/kaminari/_page.html.erb from kaminari_themes...
create app/views/kaminari/_page.html.erb
downloading app/views/kaminari/_paginator.html.erb from kaminari_themes...
create app/views/kaminari/_paginator.html.erb
downloading app/views/kaminari/_prev_page.html.erb from kaminari_themes...
create app/views/kaminari/_prev_page.html.erb
引数でfoundation5を指定することでfoundation5とfoundation6に対応したviewがapp/views/kaminari/配下に作成されます。
確認
railsを立ち上げます。
実行結果を確認します。
デザインの適用されたページングview
綺麗にデザインされたviewが表示されました。
まとめ
railsでFoundation6を利用してページング処理を使う場合は、kaminari_themesを使うと便利です。
もちろん自分でデザインしても結構ですが、良いライブラリがある場合は利用したほうが、優れたアプリ生成できると思います。
以上。
PICK UP オススメ書籍
運営サイト(railsで作成しています)
参考記事
この記事がお役にたちましたらシェアをお願いします
0 件のコメント:
コメントを投稿