Material Design Lite (MDL)
Googleの提供しているデザインフレームワーク
Material Design Lite
マテリアルデザインのサイトを作れます
前提条件
参考環境
Rails 4.2.4
Ruby 2.2.1
MDL 1.0.6
導入
- Downloadページからjsとcssの一式を入手
- Railsの
app/assets/javascripts/にmaterial.jsファイルを、app/assets/stylesheets/にmaterial.cssファイルをコピー
使い方
componentsページに書いてある通りにパーツを使う
turbolinksを使わない
RailsのturbolinksはMDLと相性が悪い。turbolinksが有効だと、最初のページ読み込み時は正常に動作するけど、ページ遷移とかすると途端にMDLが動作しなくなってしまう。
対応策:turbolinksをオフにする
turbolinksがオンのまま使う方法もありそうだけど、すぐに動かしたいときなどは以下の方法がオススメ。
lang:app/assets/javascripts/application.jsにturbo linksを使用するように設定されているので、その行を削除する。
変更前
app/assets/javascripts/application.js
//
//= require jquery
//= require jquery_ujs
//= require turbo links
//= require_tree .
変更後
app/assets/javascripts/application.js
//
//= require jquery
//= require jquery_ujs
//= require_tree .
以上でMDLがRailsで動きました。おしまい。
参考URL