気ままにふりーだむ

学習やメモなどを投稿します。プログラミング仲間や仕事、求人の話は大募集。気軽にフォローやいいねいただけると励みになります!

haml Rails プログラミング

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

投稿日:

マテリアルデザイン「Materialize」とフォームの記述がシンプルな「simple_form」の実装をしたので、メモ。

GemfileにGemを記載からのbundle install

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

simple_formのインストール

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

simple_formの記述方法(例)

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

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

#結果確認
Materialize画面.png
正常に表示されました!!

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

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

参考

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

-haml, Rails, プログラミング

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

jQueryで繰り返し処理each文を使ってみる!

each文のまとめです! jQueryでは配列、オブジェクト、jQueryオブジェクトが対応可能。 jQueryオブジェクトの場合、少し記載が異なります。 また途中終了する方法とスキップする方法を記載 …

[AWS]bundle exec cap production deployのエラーでつまった話

デプロイを行う際に発生したエラーで行なったことをメモ。 同じように困った方の参考になればと。 環境 ruby 2.3.1 Rails 5.0.7.2 MySQL git unicorn nginx c …

no image

正規表現全然わからん!でもまとめる!

正規表現について、まとめます! 使うときのためにメモ。 \d 1個の半角数字(0123456789) \dは「1個の半角数字」なので、\d\dは「半角数字2個」の意味 [crayon-5dee62eb …

no image

[Rails]deviseを実装する

こんにちは。 ログイン機能を実装する便利なGem deviseの導入方法をまとめます。 それでは早速はじめます。 まずはGemfileにdeviseを記載します。 [crayon-5dee62ebef …

no image

jQueryでmapメソッドを使う!

mapメソッドについてまとめます! 基本的にはeachメソッドと同じ。jQueryオブジェクトの場合は記載が違うので注意は必要。 またmapメソッドの引数として関数を使用する方法について記載します。 …