simple_formとtwitterbootstrapで簡単にかっこよくformを作る。

ど定番のgemの連携ですが、メモがてらまとめました。

インストール

下記で必要なものがインストールされます。

使い方

使い方は名前の通り非常にシンプルで、

f.inputで何が生成されているかというと下記のものが生成される。

上記の自動生成されるHTMLには下記のものが含まれています。これはvalidateでpresenceをつけていると自動で生成してくれます。

フォームのデザインを変える

デフォルトだとvertical_formというwrapperとなっていて。見た目的には

lebel
input

という形で2段に別れています。これをhorizontal_formに変更してみます。

変更方法は2つあります。

configでdefault_wrapperを書き換える。

139行目あたりにデフォルトの設定がされています。

こちらで実装すると共通して、設定したformになります。(今回で言えば、:horizontal_form)

各formに直接設定する。

こちらだと、form単位で設定することができます。

どちらにせよクラスの設定は必要。

上記のどちらかの設定だけでも、それっぽくはなりますがデザインを完成形にするにはクラスの設定も必要です。

configで設定している場合は、wrapperの設定は必要ありません。

今回のhorizontal-formで吐き出されるHTMLは下記になります。

各項目のエラーメッセージをfull_messageと同じにする

simple_formを作成すると、エラー時に各エラーメッセージを表示してくれる。

が、双方微妙に表示内容が違う。

  • fulle message
    「Category name can’t be blank」

  • message
    「can’t be blank」

これを日本語に調整しようとすると面倒なので、どちらもfull messageの内容を表示する。

SNSでもご購読できます。

コメントを残す

*