気ままにふりーだむ

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

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

[Ruby]「class クラス名 end」という記述じゃないクラス定義

クラス定義は通常下記のように行いますよね。

上記を用いないでクラス定義する方法について学んだのでメモ。 結論からいうと下記のような記載 …

no image

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

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

no image

[Rails]deviseを実装する

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

AWS+nginxサーバーに独自ドメインを設定したい

はじめに 現在の状況です。 下記環境でAWSにnginxサーバーを使用してデプロイはできている状態です。 IPでアプリケーションは表示されているが、自分で取得したドメインでも表示できるように したいと …

画像アップロードCarrierwaveを導入する

画像アップロードのGem Carrierwaveの導入方法を忘れちゃうので、手順をメモ。 今回は画像リサイズのためmini_magickも導入します Gemfileを設定 それでは早速、下記Gemをイ …