カテゴリー: FrontEnd

ウチのMaterialize事情

1 はじめに
2 ボタン
3 フォーム
4 アラート
5 フォント
6 さいごに

はじめに

うちのチームでは現在、CSSフレームワークをBootstrapからMaterializeに移行しております。
Materializeは現在1.0のアルファ版であり、1.0リリースまでもう少しです。
Materialize

今回は使っているうちに気づいたこと、ルールとしてまとめたことを記載したいと思います。
なお、RubyのGemで入れて使用しています。

ボタン

ボタンは下記のように、指定しますが色を変えようと思うと少しクラス名が長くなりますね。
Materializeに慣れていないと、クラスをつけるだけで時間がかかりそうです。

<a class="waves-effect waves-light btn　red">button</a>

そのため、チーム内でボタン名のルールを決め、そちらを使うようにしました。
（例えば、新規作成画面へのボタンであれば、btn btn-newなど。）

そしてCSSの方でextendしてボタンを作成します。

// 新規作成画面へのリンクボタン
.btn-new {
  @extend .white !optional;
  @extend .black-text !optional;
}

こうすれば、あとで新規作成画面へのリンクボタンを変えたい、となっても一括で変えられます。

ただ、ここで問題が発生しました。
extendでwaves-effectのようなエフェクト用のクラスまで含めてしまうと、JavaScriptの方でセレクタが見つからない状態になります。

悩んだのですが、ページロード時に、JQueryでクラスを当てるようにしました。

$('.btn').addClass("waves-effect");

フォーム

Forms

ラベルについて

ドキュメント通りにラベルを置くと、クリック時にラベルが動きます。
この仕様ですが、テキストボックスの値を動的に変えていたりすると、実際の入力値と被ってしまい、非常に動作が不安でした。

ラベルを動かす時には、activeというクラスをつけていることが分かったので、常にactiveをつけておくようにしました。
こうすることで、動いた後の状態で固定できます。

<div class="row">
    <div class="input-field col s6">
      <input value="Alvin" id="first_name2" type="text" class="validate">
      <label class="active" for="first_name2">First Name</label>
    </div>
</div>

セレクトボックスについて

セレクトボックスですが、サンプルを見るとカッコ良い感じです。
ただ、なかなかサンプル通りになりませんでした。

どうも挙動を見ていると、selectタグ自体は非表示にし、JSで別のDOMとして表示させているようです。
こちらの調査がなかなか進まなかったため、暫定ですが、Materializeが用意しているbrowser-defaultというクラスを使用することにしました。
これは従来のセレクトボックスに近い感じのセレクトボックスにしてくれます。

<select class="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

ラジオボタンについて

Radio Buttons

ラジオボタンは、inputタグのidとlabelタグのforが一致していなければ動かないようです。
Radio buttons not working…clicking on them does not do anything

特にRailsのヘルパーなんかでラジオボタンを生成する場合、上記2つの値があっているか確認の必要があります。

アラート

Bootstrapにお世話になっていると、アラートが当たり前になります。
（うちのチームもそうです。）
ただ、マテリアルデザインにアラートは存在しません。
トーストがそれにあたるのでしょう。

とはいえ、トーストに合わせてデザインし直すのは時間的に難しかったので、アラートクラスを作成し、Bootstrapと同じように使ってもらうようにしました。

.alert {
  display: block;
  overflow: hidden;
  margin: 10px 0px;
  padding: 15px;
  border-radius: 0 0 2px 2px;
}

.alert-success {
  @extend .green !optional;
  @extend .lighten-5 !optional;
  @extend .green-text !optional;
}

.alert-info {
  @extend .light-blue !optional;
  @extend .lighten-5 !optional;
  @extend .light-blue-text !optional;
}

.alert-warning {
  @extend .orange !optional;
  @extend .lighten-5 !optional;
  @extend .orange-text !optional;
}

.alert-danger {
  @extend .red !optional;
  @extend .lighten-5 !optional;
  @extend .red-text !optional;
}