Railsで使えるGem

Rails4.2で簡単にマテリアルデザインを使えるmatelializeを試してみた〜matelialize

投稿日:2016年1月5日 更新日:

マテリアルデザイン

マテリアルデザインはGoogleが提唱する物が実際にあるっぽくみせるデザイン.
紙やカードが本当にあるようなわかりやすい動きをする.

日本語訳

matelialize

matelializeはマテリアルデザインに沿ったcssフレームワークの一つ.
materializecss.com/

sassバージョン
mkhairi/materialize-sass

sassバージョンがあるだけにRailsと親和性が高そう.
Tutorial: Using Materialize with Ruby on Rails & Simple Form

Gemfile

application.scss

このままだと、ピンクぽい公式サイトのカラーが主な色として使われる.
その前に色とかを設定する.

application.html.erb

また、head内でアイコンも読み込んでおく.

application.js

Javascriptも読み込んでおく

できた

screenshot

selectタグやmediaboxなどは、Javascriptまで実行しないといけないので、注意が必要.

simple_form

config/initializers/simple_form.rb

上のチュートリアルを参考に

そして、ボタンも設定

デフォルトでマテリアルデザインを使う.

datepickerを使う

type=”date”で、適当にクラスやIDを指定して、pickadate.jsを使う.
simple_formでdate_fieldを使うには、結局、type: :dateにして、html5: trueとしておくことになったみたい.
github.com/plataformatec/simple_form/commit/fb1f52dbc5855e3e33bc441ec89c9bd519d416cb

そして、pickadate.jsを使う.

参考: MaterializeCSSのDate Pickerを日本語化する

-Railsで使えるGem
-, ,

執筆者:

関連記事

no image

RailsでRedisを使う例のメモ

最近よく見かけるようなのでメモ Redisって大量にメモリを積んでないとダメかと思ってたけど、思ったよりいろんな方面に用途がありそう(リンク先の情報はわたしは未検証です) Redisの基礎 (全14回 …

Deviseのユーザーと既存のMongoidモデルを関連づける

前提 Rails3.2でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails Rails3.2+Mongoidでログイン機能~dev …

Rails4でのJSONテンプレート~jbuilder+rabl+ruby

By: Wonderlane – CC BY 2.0[/caption] Rails4からJSONも標準でjbuilderを使ってテンプレートから出力できるようになった けど、しっくり来な …

Railsでデータベーススキーマの変更と関連するモデルのフォーム

  gemを公開しました!詳細は記事の最後に!   新規投稿するフォームのラベルが変数を使っていて見苦しいので自分で好きなラベルを付けられるようにした いまのスキーマはこんな感じな …

no image

Rails3.2でユーザー管理機能を追加2~Devise+AjaxDataTables

  前回 Rails3.2でユーザー管理機能を追加~Devise 参照 Railsでajaxなテーブルを使う~datatables   いままでAjaxでのデータ更新ができなかった …