気ままにふりーだむ

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

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

[Rails]ヘルパーメソッドを作る!

こんにちは! 今回はヘルパーメソッドについてのまとめです。 ヘルパーメソッドを自分で作成してみたいと思います。 それでは早速いってみましょう! そもそもヘルパーメソッドとは そもそもヘルパーメソッドな …

no image

[Rails]deviseを実装する

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

チャットアプリにメッセージの編集と削除ボタンをつける

やりたいこと 現在チャットアプリを作っており、投稿したメッセージの編集と削除を行うために まずはボタンを配置したいと思っています。またそのボタンは常時表示させるのでなく、 該当メッセージにカーソルが当 …

no image

jQueryでmapメソッドを使う!

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

no image

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

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