trybeetle

take it slow!!

Material Design Liteの使用法


Posted on May 3, 2018, 1:37 p.m.



Material Design Liteについてです。

CDNで利用する場合

下記を記載します。


    
    
    

Localに置いて利用する場合

まず、ファイルをダウンロードします。
Material Design Liteのダウンロードはこちらから
Material iconのダウンロードはこちらから

配置するファイルは、material.min.css、material.min.js、iconfontフォルダです。

ファイルを配置したら、下記を記載します。


    
    
    

使用法

こちらに使用例が記載されています。

Navigationについて

下記、公式サイトからの抜粋です。現在いるページの色を変えたい場合には、mdl-navigation__link--currentを使います。


    
Title
Title

inputについて

下記公式サイトから引っ張てきました。


    

val()で値をinput内に表示させておきたい場合、ラベルと表示が重なってしまいます。その場合には、val()で値を引っ張て来た後に、下記を記載します。


    document.querySelector('#test').parentNode.MaterialTextfield.checkDirty();

tableについて

tableはレスポンシブになっていないので、少しCSSに手を加えます。下記例です。


    .mdl-data-table {
    width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    white-space: normal;
    }

注意事項

!DOCTYPE htmlで宣言しないと、iconの表示が少し崩れてしまいます。記載しておきましょう。

以上です。


Category:web
Tag: javascript cordova web
May 3, 2018, 1:37 p.m.

Comments