はじめに
うちのチームでは現在、CSSフレームワークをBootstrapからMaterializeに移行しております。
Materializeは現在1.0のアルファ版であり、1.0リリースまでもう少しです。
Materialize
今回は使っているうちに気づいたこと、ルールとしてまとめたことを記載したいと思います。
なお、RubyのGemで入れて使用しています。
ボタン
ボタンは下記のように、指定しますが色を変えようと思うと少しクラス名が長くなりますね。
Materializeに慣れていないと、クラスをつけるだけで時間がかかりそうです。
| 1 | <a class="waves-effect waves-light btn red">button</a> |
そのため、チーム内でボタン名のルールを決め、そちらを使うようにしました。
（例えば、新規作成画面へのボタンであれば、
btn btn-new
など。）
そしてCSSの方で
extend
してボタンを作成します。
| 1 2 3 4 5 | // 新規作成画面へのリンクボタン .btn-new { @extend .white !optional; @extend .black-text !optional; } |
こうすれば、あとで新規作成画面へのリンクボタンを変えたい、となっても一括で変えられます。
ただ、ここで問題が発生しました。
extend
で
waves-effect
のようなエフェクト用のクラスまで含めてしまうと、JavaScriptの方でセレクタが見つからない状態になります。
悩んだのですが、ページロード時に、JQueryでクラスを当てるようにしました。
| 1 | $('.btn').addClass("waves-effect"); |
フォーム
ラベルについて
ドキュメント通りにラベルを置くと、クリック時にラベルが動きます。
この仕様ですが、テキストボックスの値を動的に変えていたりすると、実際の入力値と被ってしまい、非常に動作が不安でした。
ラベルを動かす時には、
active
というクラスをつけていることが分かったので、常に
active
をつけておくようにしました。
こうすることで、動いた後の状態で固定できます。
| 1 2 3 4 5 6 | <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
というクラスを使用することにしました。
これは従来のセレクトボックスに近い感じのセレクトボックスにしてくれます。
| 1 2 3 4 5 6 | <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> |
ラジオボタンについて
ラジオボタンは、
input
タグの
id
と
label
タグの
for
が一致していなければ動かないようです。
Radio buttons not working…clicking on them does not do anything
特にRailsのヘルパーなんかでラジオボタンを生成する場合、上記2つの値があっているか確認の必要があります。
アラート
Bootstrapにお世話になっていると、アラートが当たり前になります。
（うちのチームもそうです。）
ただ、マテリアルデザインにアラートは存在しません。
トーストがそれにあたるのでしょう。
とはいえ、トーストに合わせてデザインし直すのは時間的に難しかったので、アラートクラスを作成し、Bootstrapと同じように使ってもらうようにしました。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .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; } |
フォント
MaterializeのデフォルトフォントはRobotoというものですが、日本語があまりよくないです。
そのため、Googleが用意しているWebフォントを
import
しています。
Google が提供する日本語 Web フォント
さいごに
私たちもまだまだ使いこなせているわけではありませんが、現状のルールをまとめてみました。
Bootstrapに比べて、JS（JQuery）に依存する部分が多いところが大変です。
またTurbolinksやAjaxのような非同期処理が絡む場合は注意が必要そうです。
