jQuery
Materialize

Materialize を使ってみた

動機

ちょっとした入力フォーム付きのページをつくる機会があったので、前々から気になっていた Google が提唱するマテリアルデザインに触れてみようということで、マテリアルデザインを簡単に導入できる CSS フレームワーク Materialize を使ってみたので色々とメモ。
公式ドキュメントがしっかりしているのと、Bootstrap を使ったことがあったので何も難しいことはなかった。
なお、バージョンは 0.100.2 にした。最新の 1.X 系はお作法が少し違うっぽい。
(結果的には 1.X 系でも良かったかな…)

CDN 読み込み

// css(アイコンは使わないなら不要)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

// Javascript(jQuery も必要)
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

グリッド

仕組みは Bootstrap と同じ、12 ブロックで横一列という考え方。
class="row" を一行とみなして、その中に class="col s12" のような感じでブロックを配置していく。
s12s は、横幅が狭くなったときにどのくらいの大きさでブレークするかの意味、12row の中に 1 ブロックだけという意味になる。
公式ドキュメントの絵を見るとイメージしやすいかも。

<div class="row">
  <div class="col s12"></div>
</div>
<div class="row"> // 一行にブロックを増やしたければ、このように合計で 12 になるようにする
  <div class="col s6"></div>
  <div class="col s6"></div>
</div>

フォーム

<input><label>class="input-field" でラッピングする。
最初、<input> より <label> を上にしていたのだけど上手く表示されないことがあった…
HTML5 のお作法なのかな?

<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <input type="text" id="hoge"/>
        <label for="hoge">ほげ</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s6">
        <select>
          <option value="" disabled selected>選んでね</option>
          <option value="A">A</option>
          <option value="B">B</option>
        </select>
        <label>セレクトボックス</label>
      </div>
      <div class="input-field col s6">
        <input type="text" id="fuga" data-length="16"/> // data-length で右下に入力中の文字数を表示できる
        <label for="fuga">ふが</label>
      </div>
    </div>
  </form>
</div>

<script type="text/javascript">
  // select は jQuery によるイニシャライズが必要
  $(function() {
    $(document).ready(function() {
      $('select').material_select();
    });
  });
</script>

ボタン

class="btn waves-effect" を付与する。

<button type="button"class="btn waves-effect">ボタン</button>

アイコン

class="material-icons" を付与して {アイコン名} を指定する。
(最初アイコン名をクラスに指定していて表示されないじゃん!てなった…ここが Bootstrap と違うとこ)
アイコン名はここを参照。

<button type="button"class="btn waves-effect"><i class="material-icons">content_copy</i></button>

背景は class="grey lighten-3" のように指定。
フォントは class="grey-text text-darken-4" のように指定。
色の名前はここを参照。

<button type="button" class="btn waves-effect grey lighten-3 grey-text text-darken-4"><i class="material-icons">content_copy</i></button>

とりあえずここまで。