[Rails5]MaterializeをRailsで使ってみる

利用方法

基本は公式HP↓

https://materializecss.com/getting-started.html

利用方法は、他のフレームワーク系と一緒で下記の３つ

1. アップロード
2. CDN
3. Gem(こちらを使う場合は、GithubのGemの公式ページを参考にする)

アップロード

Sassを利用するのがいいと思う。

CDN

変更があるかもしれないので、公式HPを参考にしたほうがいいと思うが一応メモ。

<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

Gem

公式ではなさそう。コラボレーターが頑張っているんだと思う。

https://github.com/mkhairi/materialize-sass

8月末の修正でJSがうまく動くようになった。

バージョン指定が重要。

gem 'materialize-sass', '~> 1.0.0'

Sass

app/assets/stylesheets/application.scss

@import "https://fonts.googleapis.com/icon?family=Material+Icons";
@import "materialize/components/color-variables";
$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
@import 'materialize';

$primary-color : メインカラー

$secondary-color：サブカラー

を指定。

うまく動作しない場合は、同名のcssファイルがあるかもしれない。その場合は、そのファイルを削除。

$ rm app/assets/stylesheets/application.css

JavaScript

app/assets/javascripts/application.js

//= require materialize-sprockets

実装

公式HPをみるのが一番いい。

JSを使うときは、各JSの初期化を行う必要がある。

下記のように呼び出すといちいち初期化をする必要がなくて済む。

ただし、オプションが一切使えない。

 M.AutoInit(); 

個別の初期化の方法は、各ページのInitializationに記載している下記のようなコードをコピペ。

だいたいの場合、jQueryを使っていると思うので// Or with jQuery以下ををコピペ

// Or with jQuery
 
$(document).ready(function(){
    $('.sidenav').sidenav();
});