歩行訓練

おいっちにー!

Material Design Lite の hide 機能

Google さんがなんか出してきたので、そちらに移行したいとこいう事になってしまった。

Materialize で出来た、ウインドウサイズによって隠す方法はどうやるんだろうと思っていたら、書かれていた。

Material Design Lite

mdl-cell--hide-desktop

mdl-cell--hide-tablet

mdl-cell--hide-phone

mdl-cell--hide-desktop

デスクトップモードの時に隠れる。

デスクトップモードってなんやねん。と思ったが、実際に動かしてみると cell が 9以上の時に隠れる模様。

mdl-cell--hide-tablet

タブレットモードの時に隠れる。

実際に動かしてみると、cellが 5以上、8以下の時に隠れる。

mdl-cell--hide-phone

フォーンモードの時に隠れる。

動かすと4以下の時に隠れる。

 

で、それぞれ互いに背反というか、同時には発動しない。だから、デスクトップ以下場合に隠したい要望がある場合は2つ指定する必要があるっぽい。

 

この項目に、「mdl-cell--N-col-phone」とかあるが、例えばこの phone の場合、つまり cell が 4以下の場合に、実際は 6 にするとか、8にするとかいう機能がある模様。

この機能を使うと、Materialize で2重に書く必要があった、隠す部分と表示する部分の切り替えができるんじゃないかと思うが、とりあえずやってみるしかない。