material-design-liteのmasterにdialogが追加されていたのでコンパイルして使ってみる

material-design-liteを使いたいけど、モーダルとか自前か〜めんどいな〜と思っていたらmasterブランチにdialogなるディレクトリが追加されていたので、落としてコンパイルして使ってみました。

masterブランチからcloneして試しているので、ご注意を！

試した環境

以下の環境で試してます

・ubuntu16.04

落としてきてコンパイル〜導入

公式のgithubに書いてある手順で落としてコンパイルします。

【公式github】
https://github.com/google/material-design-lite

$ # clone
$ git clone https://github.com/google/material-design-lite.git

$ cd material-design-lite

$ # 必要なライブラリを取り込む
$ npm install

$ # minify
$ gulp

これでdistディレクトリが生成されるので、dist配下のmaterial.*ファイルを、自分のプロジェクトの適当なディレクトリに移動する。

使ってみる

とりあえずログインダイアログ的なものを出してみました。

<button id="openModal">ログイン</button>
<dialog class="mdl-dialog" id="modal">
  <p class="mdl-dialog__title">ログイン</p>
  <div class="mdl-dialog__content">
    <div className="mdl-textfield mdl-js-textfield mdl-textfield-floating-label is-upgraded">
      <input className="mdl-textfield__input mdl-model" type="text" id="account" name="account" autofocus />
      <label className="mdl-textfield__label" htmlFor="account">アカウント</label>
    </div>
    <div className="mdl-textfield mdl-js-textfield mdl-textfield-floating-label is-upgraded">
      <input className="mdl-textfield__input mdl-model" type="password" id="password" name="password" autofocus />
      <label className="mdl-textfield__label" htmlFor="password">パスワード</label>
    </div>
    <div className="mdl-dialog__actions">
      <button className="mdl-button mdl-js-button close">キャンセル</button>
      <button className="mdl-button mdl-js-button mdl-button--colored">ログイン</button>
    </div>
  </div>
</dialog>

<!-- 以下モーダル表示用js(jQuery) -->
<script>
$(function() {
  $('#openModal').click(function() {
    document.querySelector('dialog').showModal();
  });
});
</script>

こんな感じに表示されました！