Materializeとsimple_formでシンプルでいい感じのフォームを作りたい！

マテリアルデザイン「Materialize」とフォームの記述がシンプルな「simple_form」の実装をしたので、メモ。
今回はシンプルなinputボックスのみとなります。selectボックスも使いたい方は下記もご参照ください。
enumを使ったselectボックスの実装

GemfileにGemを記載からのbundle install

Gemfile.

gem 'simple_form' #simple_formのGem
gem 'materialize-sass' #MaterializeのGem
gem 'jquery-rails' #記載あるか確認

ターミナル.

bundle install

「jquery-rails」の記載があるか要確認です。
無いとMaterializeが正しく表示されません場合は記載しましょう。

simple_formのインストール

ターミナル.

rails g simple_form:install

上記コマンドにより、関連ファイルの作成が作成されます。
simple_formの導入はこれでOKです。

simple_formの記述方法(例)

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

上記のようにシンプルに記述することができます。
詳しくは、[Github] simple_formを参考に。

Materializeの続き

「application.css」のファイル名を「application.scss」に変更。
「materialize」を読み込みます。

application.scss

@import "materialize";

結果確認

正常に表示されました！！

おまけ

1.画像アップロード Carrierwaveの導入方法

2.今回作成したフォームのコード

new.html.haml

.row
  = simple_form_for(@product) do |f|
    .row
      .input-field.col.s6
        = f.input :name
        = f.input :description
        = f.input :price
        = f.input :unit
        = f.input :image
        = f.button :submit

参考

[参考]Railsのform_for内のコードをすっきりさせるsimple_formの使い方
[参考]Github simple_form
[参考]Github materialize-sass
[参考]【Rails】【ソースコードあり】簡単にMaterializecssを導入する方法