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

Rubyでffmpegのラッパーを使う~streamio-ffmpeg

  github.com/streamio/streamio-ffmpeg rubyでffmpegが扱える高機能ラッパー 導入 [crayon-599defdbea2aa753039432/ …

多対多の関係でまだ関連を持っていない候補を探す〜active_record、pluck、not in

By: Kevin Dooley – CC BY 2.0 目次1 前提2 やりたいこと3 解4 解説 前提 PersonとProjectは、ProjectsPersonという中間モデル(テ …

RubyでWebを操作できるMechanizeの利用例を集めてみた

By: nubobo – CC BY 2.0 目次1 公式2 使い方など3 リンク 公式 mechanize.rubyforge.org/ 使い方など Mechanize について 楽々ス …

backbone-relationalをJasmineでテストしてみた

RubyでTwitter〜twitter & t

By: Pete Simon – CC BY 2.0 目次1 はじめに2 twitter.gemのインストール3 Twitterアプリへの登録4 サンプルから試してみる5 cliでTwit …