Materialdesignlite-quick-guide

提供：Dev Guides
移動先:案内、検索

Material Design Lite-概要

Material Design Liteとは何ですか？

Material Design Lite（MDLは、CSS、JavaScript、HTMLで作成されたUIコンポーネントライブラリです。 MDL UIコンポーネントは、魅力的で一貫性のある機能的なWebページおよびWebアプリの構築を支援すると同時に、ブラウザーの移植性、デバイスの独立性、適切な劣化などの最新のWebデザインの原則を順守します。

以下は、Material Design Liteの顕著な特徴です-

  • 組み込みのレスポンシブデザイン。
  • フットプリントが最小限の標準CSS。
  • マテリアルデザインの概念に従うように適合されたボタン、チェックボックス、テキストフィールドなどの一般的なユーザーインターフェイスコントロールの新しいバージョンが含まれています。
  • カード、列レイアウト、スライダー、スピナー、タブ、タイポグラフィなどの強化された特殊な機能が含まれています。
  • ライブラリまたは開発環境の有無にかかわらず使用できます。
  • クロスブラウザ。再利用可能なWebコンポーネントの作成に使用できます。

レスポンシブデザイン

  • Material Design Liteにはレスポンシブデザインが組み込まれているため、Material Design Liteを使用して作成されたWebサイトは、デバイスサイズに応じて再設計されます。
  • Material Design Liteクラスは、Webサイトが任意の画面サイズに適合するように作成されます。
  • Material Design Liteを使用して作成されたWebサイトは、PC、タブレット、およびモバイルデバイスと完全に互換性があります。

標準CSS

  • Material Design Liteは標準のCSSのみを使用し、非常に簡単に習得できます。
  • jQueryなどの外部JavaScriptライブラリへの依存関係はありません。
  • ExtensibleMaterial Design Liteは、設計上、非常に最小限でフラットです。
  • 既存のCSSルールを上書きするよりも新しいCSSルールを追加する方がはるかに簡単であるという事実を考慮して設計されています。
  • 影と大胆な色をサポートしています。
  • 色と濃淡は、さまざまなプラットフォームとデバイスで均一です。

そして何よりも重要なことは、MDLは絶対に無料で使用できるということです。

Material Design Lite-環境設定

Material Design Liteを使用するには2つの方法があります-

  • ローカルインストール-ローカルマシンにmaterial。\ {primary}-\ {accent} .min.cssおよびmaterial.min.jsファイルをダウンロードして、HTMLコードに含めることができます。
  • * CDNベースのバージョン*-material。\ {primary}-\ {accent} .min.cssおよびmaterial.min.jsファイルを、コンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。

ローカルインストール

MDLをインストールするには、次の手順に従います-

  • [[1]]
  • 次に、ダウンロードした material.min.js ファイルをWebサイトのディレクトリに置きます。/jsおよび/cssの material.min.css 。

例

これで、次のようにHTMLファイルに_css_および_js_ファイルを含めることができます- 

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "material.min.css">
      <script src = "material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>

   </body>
</html>

上記のプログラムは、次の結果を生成します-

CDNベースのバージョン

Content Delivery Network（CDN）から直接jsおよびcssファイルをHTMLコードに含めることができます。 storage.googleapis.com は、最新バージョンのコンテンツを提供します。

'_このチュートリアルでは、storage.googleapis.com CDNバージョンのライブラリを使用しています。_

例

次に、Google CDNのmaterial.cssとmaterial.jsを使用して上記の例を書き直します。 

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>

   </body>
</html>

上記のプログラムは、次の結果を生成します-

Material Design Lite-レイアウト

この章では、Material Design Liteのさまざまなレイアウトについて説明します。 HTML5には次のコンテナ要素があります-

  • <div> -HTMLコンテンツに汎用コンテナを提供します。
  • <header> -ヘッダーセクションを表します。
  • <footer> -フッターセクションを表します。
  • <article> -記事を表します。
  • <section> -さまざまなタイプのセクションの汎用コンテナを提供します。

MDLは、事前定義されたさまざまな視覚的および動作強化をコンテナに適用するためのさまざまなCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-layout

コンテナーをMDLコンポーネントとして識別します。 外側のコンテナ要素に必要です。

2

mdl-js-layout

基本的なMDL動作をレイアウトに追加します。 外側のコンテナ要素に必要です。

3

mdl-layout__header

コンテナーをMDLコンポーネントとして識別します。 ヘッダー要素で必須。

4

mdl-layout-icon

アプリケーションアイコンを追加するために使用されます。 両方が表示されている場合、メニューアイコンによってオーバーライドされます。 オプションのアイコン要素。

5

mdl-layout__header-row

コンテナーをMDLヘッダー行として識別します。 ヘッダーコンテンツコンテナーで必要です。

6

mdl-layout__title

レイアウトタイトルテキストを識別します。 レイアウトタイトルコンテナで必要です。

7

mdl-layout-spacer

ヘッダーまたは引き出し内の要素を揃えるために使用されます。 残りのスペースを埋めるために大きくなります。 通常、要素を右に揃えるために使用されます。 レイアウトタイトルに続くdivではオプション。

8

mdl-navigation

コンテナをMDLナビゲーショングループとして識別します。 nav要素で必要です。

9

mdl-navigation__link

アンカーをMDLナビゲーションリンクとして識別します。 ヘッダーおよび/または引き出しアンカー要素に必要です。

10

mdl-layout__drawer

コンテナをMDLレイアウトドロワーとして識別します。 引き出しコンテナ要素に必要です。

11

mdl-layout__content

コンテナをMDLレイアウトコンテンツとして識別します。 メイン要素で必須。

12

mdl-layout__header—​scroll

ヘッダーをコンテンツとともにスクロールします。 ヘッダー要素でオプション。

13

mdl-layout—​fixed-drawer

引き出しを常に表示し、大きな画面で開きます。 引き出しコンテナ要素ではなく、外部コンテナ要素でオプション。

14

mdl-layout—​fixed-header

小さな画面でもヘッダーを常に表示します。 外側のコンテナ要素ではオプション。

15

mdl-layout—​large-screen-only

小さい画面で要素を非表示にします。 mdl-layoutの子孫ではオプションです。

16

mdl-layout—​small-screen-only

大きな画面で要素を非表示にします。 mdl-layoutの子孫ではオプションです。

17

mdl-layout__header—​waterfall

複数のヘッダー行で「ウォーターフォール」効果を許可します。 ヘッダー要素でオプション。

18

mdl-layout__header—​transparent

ヘッダーを透明にし、レイアウトの背景の上に描画します。 ヘッダー要素でオプション。

19

mdl-layout__header—​seamed

影のないヘッダーを使用します。 ヘッダー要素でオプション。

20

mdl-layout__tab-bar

コンテナをMDLタブバーとして識別します。 ヘッダー内のコンテナ要素で必須（タブレイアウト）。

21

mdl-layout__tab

アンカーをMDLタブリンクとして識別します。 タブバーのアンカー要素に必要です。

22

is-active

タブをデフォルトのアクティブなタブとして識別します。 タブバーアンカー要素および関連するタブセクション要素でオプション。

23

mdl-layout__tab-panel

コンテナをタブコンテンツパネルとして識別します。 タブセクション要素で必須。

24

mdl-layout—​fixed-tabs

デフォルトのスクロール可能なタブの代わりに固定タブを使用します。 ヘッダー内部のコンテナではなく、外部コンテナ要素でオプション。

次の例は、mdl-layoutクラスを使用してさまざまなコンテナをスタイルする方法を示しています。

固定引き出し

引き出しを固定してヘッダーを持たないテンプレートを作成するには、次のMDLクラスを使用します。

  • mdl-layout -divをMDLコンポーネントとして識別します。
  • mdl-js-layout -外部divに基本的なMDL動作を追加します。
  • mdl-layout—​fixed-drawer -引き出しを常に表示し、大きな画面で開くようにします。
  • mdl-layout__drawer -divをMDLレイアウトドロワーとして識別します。
  • mdl-layout-title -レイアウトタイトルテキストを識別します。
  • mdl-navigation -divをMDLナビゲーショングループとして識別します。
  • mdl-navigation__link -アンカーをMDLナビゲーションリンクとして識別します。
  • mdl-layout__content -divをMDLレイアウトコンテンツとして識別します。

mdl_fixeddrawer

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>

   </body>
</html>

結果

結果を確認します。

固定ヘッダー

追加のMDLクラスに続く固定ヘッダーでテンプレートを作成するには、使用されます。

  • mdl-layout—​fixed-header -小さな画面でもヘッダーを常に表示します。

mdl_fixedheader

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <!-- Always shows a header, even in smaller screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = ""
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = ""
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>

         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <div class = "page-content">Hello World!</div>
         </main>
      </div>

   </body>
</html>

結果

結果を確認します。

固定ヘッダーと引き出し

固定ヘッダーと固定ドロワーを持つテンプレートを作成するには、次の追加のMDLクラスが使用されます。

  • mdl-layout—​fixed-drawer -引き出しを常に表示し、大きな画面で開くようにします。
  • mdl-layout—​fixed-header -小さな画面でもヘッダーを常に表示します。

mdl_fixedheader

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <!-- The drawer is always open in large screens. The header is always
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = ""
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = ""
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>

         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <div class = "page-content">Hello World!</div>
         </main>
      </div>

   </body>
</html>

結果

結果を確認します。

スクロールヘッダー

スクロールヘッダーを持つテンプレートを作成するには、次のMDLクラスを使用します。

  • mdl-layout—​header—​scroll -コンテンツでヘッダーをスクロールします。

mdl_scrollingheader

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <!--  Uses a header that scrolls with the text, rather than
         staying locked at the top -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--scroll">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>
               </nav>
            </div>
         </header>

         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>

   </body>
</html>

結果

結果を確認します。

契約ヘッダー

ページが下にスクロールすると縮小するヘッダーを持つテンプレートを作成するには、次のMDLクラスを使用します。

  • mdl-layout__header—​waterfall -複数のヘッダー行で「ウォーターフォール」効果を許可します。

mdl_waterfallheader

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <!-- The drawer is always open in large screens. The header is always
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--waterfall">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
            </div>

            <!-- Bottom row, not visible on scroll -->
            <div class = "mdl-layout__header-row">
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>
               </nav>
            </div>
         </header>

         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>

   </body>
</html>

結果

結果を確認します。

スクロール可能なタブ付きの固定ヘッダー

スクロール可能なタブを持つヘッダーを持つテンプレートを作成するには、次のMDLクラスが使用されます。

  • mdl-layout__tab-bar -コンテナをMDLタブバーとして識別します。
  • mdl-layout__tab -アンカーをMDLタブリンクとして識別します。
  • mdl-layout__tab-panel -コンテナをタブコンテンツパネルとして識別します。

mdl_scrollabletabheader

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <!-- The drawer is always open in large screens. The header is always
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
            </div>

            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
            </div>
         </header>

         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>

   </body>
</html>

結果

結果を確認します。

固定タブ付きの固定ヘッダー

固定タブを持つヘッダーを持つテンプレートを作成するには、次の追加のMDLクラスが使用されます。

  • mdl-layout—​fixed-tabs -デフォルトのスクロール可能なタブの代わりに固定タブを使用します。

mdl_fixedtabheader

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <!-- The drawer is always open in large screens. The header is always
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
            </div>

            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>
            </div>
         </header>

         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>

   </body>
</html>

結果

結果を確認します。

Material Design Lite-グリッド

Material Design Lite（MDL）グリッドは、さまざまな画面サイズのコンテンツをレイアウトするためのコンポーネントです。 MDLグリッドが定義され、コンテナ/div要素で囲まれています。 グリッドには、デスクトップサイズの画面に12列、タブレットサイズの画面に8列、電話サイズの画面に4列があり、各サイズにはマージンと溝が事前に定義されています。 セルは、次の例外を除き、定義された順序で連続して行に配置されます。

  • グリッドセルがいずれかの画面サイズの行に収まらない場合、次の行に流れます。 *グリッドセルに指定された列サイズが画面サイズの列数以上の場合、行全体を占有します。

MDLは、グリッドにさまざまな事前定義された視覚的および動作強化を適用するためのさまざまなCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1
  • mdl-layout*

コンテナーをMDLコンポーネントとして識別します。 外側のコンテナ要素に必要です。

2

mdl-grid

コンテナをMDLグリッドコンポーネントとして識別します。 「外部」div要素で必要です。

3

mdl-cell

コンテナーをMDLセルとして識別します。 「内部」div要素で必要です。

4

mdl-grid—​no-spacing

グリッドセルを更新して、それらの間に余白がないようにします。 グリッドコンテナのオプション。

5

mdl-cell—​N-col

これにより、セルの列サイズをNに設定できます。Nは1〜12で、デフォルトは4です。 「内部」div要素のオプション。

6

mdl-cell—​N-col-desktop

これにより、デスクトップモードのみでセルの列サイズをNにすることができます。Nは1〜12です。 「内部」div要素のオプション。

7

mdl-cell—​N-col-tablet

これは、セルの列サイズをタブレットモードでのみNにする場合に役立ちます。Nは1〜8です。 「内部」div要素のオプション。

8

mdl-cell—​N-col-phone

これにより、セルの列サイズを電話モードでのみNに設定できます。Nは1〜4です。 「内部」div要素のオプション。

9

mdl-cell—​hide-desktop

デスクトップモードのときにセルを非表示にします。 「内部」div要素のオプション。

10

mdl-cell—​hide-tablet

タブレットモードのときにセルを非表示にします。 「内部」div要素のオプション。

11

mdl-cell—​hide-phone

電話モードのときにセルを非表示にします。 「内部」div要素のオプション。

12

mdl-cell—​stretch

セルを垂直方向に引き伸ばして親を埋めます（デフォルト）。 「内部」div要素のオプション。

13

mdl-cell—​top

セルを親の上部に揃えます。 「内部」div要素のオプション。

14

mdl-cell—​middle

セルを親の中央に揃えます。 「内部」div要素のオプション。

15

mdl-cell—​bottom

セルを親の下部に揃えます。 「内部」div要素のオプション。

例

次の例は、mdl-gridクラスを使用してさまざまな画面にコンテンツをレイアウトする方法を理解するのに役立ちます。

この例では、以下に示すMDLクラスが使用されます。

  • mdl-layout -divをMDLコンポーネントとして識別します。
  • mdl-js-layout -外部divに基本的なMDL動作を追加します。
  • mdl-layout—​fixed-header -小さな画面でもヘッダーを常に表示します。
  • mdl-layout__header-row -コンテナをMDLヘッダー行として識別します。
  • mdl-layout__drawer -divをMDLレイアウトドロワーとして識別します。
  • mdl-layout-title -レイアウトタイトルテキストを識別します。
  • mdl-navigation -divをMDLナビゲーショングループとして識別します。
  • mdl-navigation__link -アンカーをMDLナビゲーションリンクとして識別します。
  • mdl-layout__content -divをMDLレイアウトコンテンツとして識別します。
  • mdl-grid -divをMDLグリッドコンポーネントとして識別します。
  • mdl-cell -divをMDLセルとして識別します。
  • mdl-cell—​1-col -セルの列サイズをデスクトップ画面サイズの12セルのうち1セルのサイズに設定します。
  • mdl-cell—​2-col -セルの列サイズをデスクトップ画面サイズの12セルのうち2セルに設定します。
  • mdl-cell—​4-col -セルの列サイズをデスクトップ画面サイズの12セルのうち4セルに設定します。
  • mdl-cell—​6-col -セルの列サイズをデスクトップ画面サイズの12セルのうち6セルのサイズに設定します。
  • mdl-cell—​4-col-phone -セルの列サイズを、電話画面サイズの4つのセルのうち4つのセルのサイズに設定します。
  • mdl-cell—​6-col-tablet -タブレット画面サイズの8セルのうち6セルのセルの列サイズを設定します。
  • mdl-cell—​8-col-tablet -タブレット画面サイズの8セルのうち8セルのセルの列サイズを設定します。

mdl_grid

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">

      <style>
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>

   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <span class = "mdl-layout-title">Material Design Grid</span>
            </div>
         </header>

         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>
            </nav>
         </div>

         <main class = "mdl-layout__content">
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--1-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">3</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">5</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">7</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">8</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">9</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">10</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">11</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">12</div>
            </div>

            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--4-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">3</div>
            </div>

            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--2-col graybox">2</div>
            </div>

            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</div>
               <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</div>
               <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</div>
            </div>
         </main>
      </div>

   </body>
</html>

結果

結果を確認します。

Material Design Lite-タブ

Material Design Lite（MDL）タブコンポーネントは、単一のスペースに複数の画面を排他的に表示するのに役立つユーザーインターフェイスコンポーネントです。

MDLは、さまざまなCSSクラスを提供して、事前定義されたさまざまな視覚的および動作強化をタブに適用します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-layout

コンテナーをMDLコンポーネントとして識別します。 外側のコンテナ要素に必要です。

2

mdl-tabs

タブコンテナをMDLコンポーネントとして識別します。 「外部」div要素で必要です。

3

mdl-js-tabs

基本的なMDL動作をタブコンテナーに設定します。 「外部」div要素で必要です。

4

mdl-js-ripple-effect

リップルクリック効果をタブリンクに追加します。 オプション。 「外部」div要素に進みます。

5

mdl-tabs__tab-bar

コンテナをMDLタブリンクバーとして識別します。 最初の「内部」div要素で必要です。

6

mdl-tabs__tab

アンカー（リンク）をMDLタブアクティベーターとして識別します。 最初の「内部」div要素のすべてのリンクで必要です。

7

is-active

タブをデフォルトの表示タブとして識別します。 「内部」div（タブ）要素の1つ（および1つのみ）に必要です。

8

mdl-tabs__panel

コンテナをタブコンテンツとして識別します。 各「内部」div（タブ）要素で必要です。

例

次の例は、mdl-tabクラスを使用してさまざまなタブにコンテンツをレイアウトする方法を理解するのに役立ちます。

以下に示すMDLクラスは、この例で使用されます-

  • mdl-layout -divをMDLコンポーネントとして識別します。
  • mdl-js-layout -外部divに基本的なMDL動作を追加します。
  • mdl-layout—​fixed-header -小さな画面でもヘッダーを常に表示します。
  • mdl-layout__header-row -コンテナをMDLヘッダー行として識別します。
  • mdl-layout-title -レイアウトタイトルテキストを識別します。
  • mdl-layout__content -divをMDLレイアウトコンテンツとして識別します。
  • mdl-tabs -タブコンテナをMDLコンポーネントとして識別します。
  • mdl-js-tabs -基本的なMDL動作をタブコンテナーに設定します。
  • mdl-tabs__tab-bar -コンテナをMDLタブリンクバーとして識別します。
  • mdl-tabs__tab -MDLタブアクティベーターとしてアンカー（リンク）を識別します。
  • is-active -タブをデフォルトの表示タブとして識別します。
  • mdl-tabs__panel -コンテナをタブコンテンツとして識別します。

mdl_tabs

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <span class = "mdl-layout-title">Material Design Tabs</span>
            </div>
         </header>

         <main class = "mdl-layout__content">
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>

               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>

               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>

               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>
   </body>
</html>

結果

結果を確認します。

Material Design Lite-フッター

MDLフッターコンポーネントには、 mega-footer および mini-footer の2つの主要な形式があります。 メガフッターには、ミニフッターよりも複雑なコンテンツが含まれています。 メガフッターは水平方向のルールで区切られたコンテンツの複数のセクションを表すことができますが、ミニフッターはコンテンツの単一のセクションを表します。 通常、フッターには、リンクなどの情報コンテンツとクリック可能なコンテンツの両方が含まれます。

MDLは、さまざまなCSSクラスを提供して、メガフッターおよびミニフッターにさまざまな事前定義された視覚的および動作の強化を適用します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-mega-footer

コンテナをMDLメガフッターコンポーネントとして識別します。 フッター要素に必要です。

2

mdl-mega-footer__top-section

コンテナをフッター上部セクションとして識別します。 上部セクションの「外部」div要素に必要です。

3

mdl-mega-footer__left-section

コンテナを左セクションとして識別します。 左セクションの「内部」div要素に必要です。

4

mdl-mega-footer__social-btn

メガフッター内の装飾的な正方形を識別します。 ボタン要素に必要です（使用する場合）。

5

mdl-mega-footer__right-section

コンテナを正しいセクションとして識別します。 右セクションの「内部」div要素に必要です。

6

mdl-mega-footer__middle-section

コンテナをフッター中央セクションとして識別します。 中間セクションの「外部」div要素に必要です。

7

mdl-mega-footer__drop-down-section

コンテナをドロップダウン（垂直）コンテンツ領域として識別します。 ドロップダウン「内部」div要素に必要です。

8

mdl-mega-footer__heading

見出しをメガフッターの見出しとして識別します。 ドロップダウンセクション内のh1要素に必要です。

9

mdl-mega-footer__link-list

順序付けられていないリストをドロップダウン（垂直）リストとして識別します。 ドロップダウンセクション内のul要素に必要です。

10

mdl-mega-footer__bottom-section

コンテナをフッター下部セクションとして識別します。 下部セクションの「外部」div要素に必要です。

11

mdl-logo

コンテナをスタイル付きセクションの見出しとして識別します。 メガフッター下部セクションまたはミニフッター左セクションの「内部」div要素に必要です。

12

mdl-mini-footer

コンテナーをMDLミニフッターコンポーネントとして識別します。 フッター要素に必要です。

13

mdl-mini-footer__left-section

コンテナを左セクションとして識別します。 左セクションの「内部」div要素に必要です。

14

mdl-mini-footer__link-list

順序付けられていないリストをインライン（水平）リストとして識別します。 「mdl-logo」div要素の兄弟要素であるul要素に必要です。

15

mdl-mini-footer__right-section

コンテナを正しいセクションとして識別します。 右セクションの「内部」div要素に必要です。

16

mdl-mini-footer__social-btn

ミニフッター内の装飾的な正方形を識別します。 ボタン要素に必要です（使用する場合）。

ここで、MDLフッタークラスを使用してフッターをスタイル設定する方法を理解するための例をいくつか見てみましょう。

メガフッター

*mdl-mega-footer* クラスを使用してコンテンツをフッターにレイアウトする方法について説明します。 この例では、次のMDLクラスが使用されます。
  • mdl-layout -divをMDLコンポーネントとして識別します。
  • mdl-js-layout -外部divに基本的なMDL動作を追加します。
  • mdl-layout—​fixed-header -小さな画面でもヘッダーを常に表示します。
  • mdl-layout__header-row -コンテナをMDLヘッダー行として識別します。
  • mdl-layout-title -レイアウトタイトルテキストを識別します。
  • mdl-layout__content -divをMDLレイアウトコンテンツとして識別します。
  • mdl-mega-footer -コンテナをMDLメガフッターコンポーネントとして識別します。
  • mdl-mega-footer__top-section -コンテナをフッター上部セクションとして識別します。
  • mdl-mega-footer__left-section -コンテナを左セクションとして識別します。
  • mdl-mega-footer__social-btn -ミニフッター内の装飾的な正方形を識別します。
  • mdl-mega-footer__right-section -コンテナを正しいセクションとして識別します。
  • mdl-mega-footer__middle-section -コンテナをフッター中央セクションとして識別します。
  • mdl-mega-footer__drop-down-section -コンテナをドロップダウン（垂直）コンテンツ領域として識別します。
  • mdl-mega-footer__heading -見出しをメガフッターの見出しとして識別します。
  • mdl-mega-footer__link-list -順序付けられていないリストをインライン（水平）リストとして識別します。
  • mdl-mega-footer__bottom-section -コンテナをフッター下部セクションとして識別します。
  • mdl-logo -コンテナをスタイル付きセクションの見出しとして識別します。

mdl_megafooter

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <span class = "mdl-layout-title">Material Design Tabs</span>
            </div>
         </header>

         <main class = "mdl-layout__content">
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>

                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>

               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>
                     </ul>
                  </div>

                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>
                     </ul>
                  </div>
               </div>

               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>

            </footer>
         </main>
      </div>
   </body>
</html>

結果

結果を確認します。

ミニフッター

次の例は、 mdl-mini-footer クラスを使用してコンテンツをフッターにレイアウトすることを理解するのに役立ちます。

この例では、以下に示すMDLクラスが使用されます。

  • mdl-layout -divをMDLコンポーネントとして識別します。
  • mdl-js-layout -外部divに基本的なMDL動作を追加します。
  • mdl-layout—​fixed-header -小さな画面でもヘッダーを常に表示します。
  • mdl-layout__header-row -コンテナをMDLヘッダー行として識別します。
  • mdl-layout-title -レイアウトタイトルテキストを識別します。
  • mdl-layout__content -divをMDLレイアウトコンテンツとして識別します。
  • mdl-mini-footer -コンテナをMDLミニフッターコンポーネントとして識別します。
  • mdl-mini-footer__left-section -コンテナを左セクションとして識別します。
  • mdl-logo -コンテナをスタイル付きセクションの見出しとして識別します。
  • mdl-mini-footer__link-list -順序付けられていないリストをインライン（水平）リストとして識別します。
  • mdl-mini-footer__right-section -コンテナを正しいセクションとして識別します。

mdl_minifooter

<html>
   <head>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <span class = "mdl-layout-title">Material Design Tabs</span>
            </div>
         </header>

         <main class = "mdl-layout__content">
            <footer class = "mdl-mini-footer">
               <div class = "mdl-mini-footer__left-section">
                  <div class = "mdl-logo">
                     Copyright Information
                  </div>
                  <ul class = "mdl-mini-footer__link-list">
                     <li><a href = "#">Help</a></li>
                     <li><a href = "#">Privacy and Terms</a></li>
                     <li><a href = "#">User Agreement</a></li>
                  </ul>
               </div>

               <div class = "mdl-mini-footer__right-section">
                  <button class = "mdl-mini-footer__social-btn">1</button>
                  <button class = "mdl-mini-footer__social-btn">2</button>
                  <button class = "mdl-mini-footer__social-btn">3</button>
               </div>

            </footer>
         </main>
      </div>
   </body>
</html>

結果

結果を確認します。

Material Design Lite-バッジ

MDLバッジコンポーネントは、画面上の通知であり、数字またはアイコンにすることができます。 通常、アイテムの数を強調するために使用されます。

MDLは、さまざまな事前定義された視覚的および動作の強化をバッジに適用するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-badge

要素をMDLバッジコンポーネントとして識別します。 スパンまたはリンク要素に必要です。

2

mdl-badge—​no-background

バッジに白丸効果を適用し、オプションです。

3

mdl-badge—​overlap

バッジをコンテナとオーバーラップさせ、オプションです。

4

data-badge="value"

属性として使用されるバッジに文字列値を割り当てます。スパンまたはリンクで必要です。

例

次の例は、 mdl-badge クラスを使用して通知をスパンおよびリンク要素に追加する方法を理解するのに役立ちます。

この例では、以下に示すMDLクラスが使用されます。

  • mdl-badge -要素をMDLバッジコンポーネントとして識別します。
  • data-badge -文字列値をバッジに割り当てます。 HTMLシンボルを使用して、アイコンを割り当てることができます。

mdl_badges

<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>

      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>

   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

結果

結果を確認します。

Material Design Lite-ボタン

MDLは、さまざまな事前定義された視覚的および動作強化をボタンに適用するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-button

必須のボタンをMDLコンポーネントとして設定します。

2

mdl-js-button

必須のボタンに基本的なMDL動作を追加します。

3

(none)

デフォルトのボタンにフラット表示効果を設定します。

4

mdl-button—​raised

盛り上がった表示効果を設定します。これは、fab、mini-fab、およびiconと相互に排他的です。

5

mdl-button—​fab

ファブ（円形）ディスプレイ効果を設定します。これは、レイズド、ミニファブ、およびアイコンと相互に排他的です。

6

mdl-button—​mini-fab

ミニファブ（小さなファブ円形）ディスプレイ効果を設定します。これは、raised、fab、およびiconと相互に排他的です。

7

mdl-button—​icon

アイコン（小さな丸い円形）表示効果を設定します。これは、raised、fab、およびmini-fabと相互に排他的です。

8

mdl-button—​colored

material.min.cssで色が定義されている色付きの表示効果を設定します。

9

mdl-button—​primary

material.min.cssで色が定義されている原色表示効果を設定します。

10

mdl-button—​accent

material.min.cssで色が定義されているアクセントカラー表示効果を設定します。

11

mdl-js-ripple-effect

リップルクリック効果を設定し、他のクラスと組み合わせて使用​​できます。

例

次の例は、さまざまな種類のボタンを表示するための mdl-button クラスの使用を理解するのに役立ちます。

mdl_buttons

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <table border = "0">
         <tbody>
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>

            <tr>
               <td>Colored fab (circular) display effect</td>
               <td>Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>

            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>

            <tr>
               <td>Plain fab (circular) display effect</td>
               <td>Plain fab (circular) with ripple display effect</td>
               <td>Plain fab (circular) and disabled</td>
            </tr>

            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>

            <tr>
               <td>Raised button</td>
               <td>Raised button with ripple display effect</td>
               <td>Raised button and disabled</td>
            </tr>

            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
            </tr>

            <tr>
               <td>Colored Raised button</td>
               <td>Accent-colored Raised button</td>
               <td>Accent-colored raised button with ripple effect</td>
            </tr>

            <tr>
               <td><button class = "mdl-button mdl-js-button">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>

            <tr>
               <td>Flat button</td>
               <td>Flat button with ripple effect</td>
               <td>Disabled flat button</td>
            </tr>

            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--primary">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>

            <tr>
               <td>Primary Flat button</td>
               <td>Accent-colored Flat button</td>
               <td> </td>
            </tr>

            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>

            <tr>
               <td>Icon button</td>
               <td>Colored Icon button</td>
               <td> </td>
            </tr>

            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>

            <tr>
               <td>Mini Colored fab (circular) display effect</td>
               <td>Mini Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>
         </tbody>
      </table>

   </body>
</html>

結果

結果を確認します。

Material Design Lite-カード

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまなタイプのカードを表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-card

div要素をMDLカードコンテナとして識別します。「外部」divで必要です。

2

mdl-card—​border

それが適用され、「内部」divで使用されるカードセクションに境界線を付けます。

3

mdl-shadow—​2dp through mdl-shadow—​16dp

可変シャドウ深度（2、3、4、6、8、または16）をカードに設定し、オプションで、「外部」divに進みます。省略した場合、影は表示されません。

4

mdl-card__title

divをカードタイトルコンテナとして識別し、「内部」タイトルdivで必要です。

5

mdl-card__title-text

カードタイトルに適切なテキスト特性を設定し、タイトルdiv内のヘッドタグ（H1-H6）に必要です。

6

mdl-card__subtitle-text

テキストの特性をカードのサブタイトルに追加します（オプション）。 title要素の子である必要があります。

7

mdl-card__media

divをカードメディアコンテナとして識別し、「内部」メディアdivで必要です。

8

mdl-card__supporting-text

divをカード本文テキストコンテナとして識別し、本文テキストに適切なテキスト特性を割り当てます。これは「内部」本文テキストdivで必要です。テキストはdiv内に直接挿入され、コンテナは介在しません。

9

mdl-card__actions

divをカードアクションコンテナとして識別し、適切なテキスト特性をアクションテキストに割り当てます。これは「内部」アクションdivで必要です。コンテンツは、コンテナを介さずにdiv内に直接入ります。

例

次の例は、mdl-tooltipクラスを使用してさまざまな種類のツールチップを表示する方法を理解するのに役立ちます。

mdl_cards

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>

      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family = Material+Icons">
      <style>
         .wide-card.mdl-card {
            width: 512px;
         }

         .square-card.mdl-card {
            width: 256px;
            height: 256px;
         }

         .image-card.mdl-card {
            width: 256px;
            height: 256px;
            background: url('html5-mini-logo.jpg') center/cover;
         }

         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

         .event-card.mdl-card {
            width: 256px;
            height: 256px;
            background: #3E4EB8;
         }

         .event-card.mdl-card__title {
            color: #fff;
            height: 176px;
         }

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            align-items: center;
            color: #fff;
         }
      </style>
   </head>

   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <div class = "wide-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>

                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
                     HTML5 is a standard for structuring and presenting
                     content on the World Wide Web.
                  </div>

                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>

                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>

            <td>
               <div class = "square-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>

                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.
                     HTML5 is a standard for structuring and presenting
                     content on the World Wide Web.
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>

                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         </tr>

         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <div class = "image-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand"></div>
                  <div class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </div>
               </div>
            </td>

            <td>
               <div class = "event-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <div class = "mdl-layout-spacer"></div>
                     <i class = "material-icons">event</i>
                  </div>
               </div>
            </td>
         </tr>
      </table>

   </body>
</html>

結果

結果を確認します。

Material Design Lite-プログレスバー

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまな種類のプログレスバーを表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-js-progress

基本的なMDL動作を進行状況インジケーターに設定し、必須のクラスです。

2

mdl-progress__indeterminate

アニメーションを進行状況インジケーターに設定し、オプションのクラスです。

例

次の例は、 mdl-js-progress クラスを使用してさまざまな種類の進行状況バーを表示する方法を理解するのに役立ちます。

mdl_progressbars

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <h4>Default Progress bar</h4>
      <div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
      <h4>Indeterminate Progress bar</h4>
      <div id = "progressbar2"
         class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
      <h4>Buffering Progress bar</h4>
      <div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>

      <script language = "javascript">
         document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
            function() {
            this.MaterialProgress.setProgress(44);
         });
         document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
            function() {
            this.MaterialProgress.setProgress(33);
            this.MaterialProgress.setBuffer(87);
         });
      </script>

   </body>
</html>

結果

結果を確認します。

Material Design Lite-スピナー

MDLは、さまざまな事前定義された視覚的および動作強化を適用し、さまざまなタイプのスピナーを表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-spinner

コンテナーをMDLスピナーコンポーネントとして識別し、必須のクラスです。

2

mdl-js-spinner

基本的なMDL動作をスピナーに設定し、必須のクラスです。

3

is-active

スピナーを表示およびアニメーション化します。オプションです。

4

mdl-spinner—​single-color

色を変更する代わりに単一の色を使用し、オプションです。

例

次の例は、 mdl-spinner クラスとさまざまなタイプのスピナーの使用を理解するのに役立ちます。

mdl_spinners

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <h4>Default Spinner</h4>
      <div class = "mdl-spinner mdl-js-spinner is-active"></div>
      <h4>Single Color Spinner</h4>
      <div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
   </body>
</html>

結果

結果を確認します。

Material Design Lite-メニュー

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまなタイプのメニューを表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します

Sr.No. Class Name & Description
1

mdl-button

ボタンをMDLコンポーネントとして識別し、ボタン要素で必要です。

2

mdl-js-button

基本的なMDL動作をボタンに設定し、ボタン要素に必要です。

3

mdl-button—​icon

アイコンをボタンに設定し、ボタン要素に必要です。

4

material-icons

スパンをマテリアルアイコンとして識別し、インライン要素で必要です。

5

mdl-menu

順序付けられていないリストコンテナーをMDLコンポーネントとして識別し、ul要素で必要です。

6

mdl-js-menu

基本的なMDL動作をメニューに設定し、ul要素で必要です。

7

mdl-menu__item

ボタンをMDLメニューオプションとして識別し、リストアイテム要素に必要な基本的なMDL動作を設定します。

8

mdl-js-ripple-effect

オプションリンクにリップルクリック効果を設定します（オプション）。順序なしリスト要素には必須です。

9

mdl-menu—​top-left

ボタンの上のメニュー位置を設定し、メニューの左端をボタンに揃えます。オプションです。順序なしリスト要素には必須です。

10

(none)

デフォルトでは、メニューはボタンの下に配置され、ボタンで左端に揃えられます。

11

mdl-menu—​top-right

メニューはボタンの上に配置され、ボタンで右端に揃えられ、オプションで、順序付けられていないリスト要素に配置されます。

12

mdl-menu—​bottom-right

メニューはボタンの下に配置され、ボタンで右端に揃えられ、オプションで、順序付けられていないリスト要素に配置されます。

例

次の例は、 mdl-spinner クラスを使用してさまざまなタイプのスピナーを表示する方法を理解するのに役立ちます。

mdl_menu

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">

      <style>
         .container {
            position: relative;
            width: 200px;
         }

         .background {
            background: white;
            height: 148px;
            width: 100%;
         }

         .bar {
            box-sizing: border-box;
            background: #BBBBBB;
            color: white;
            width: 100%;
            height: 64px;
            padding: 16px;
         }

         .wrapper {
            box-sizing: border-box;
            position: absolute;
            right: 16px;
         }
      </style>
   </head>

   <body>
      <table>
         <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
            <td>Top Right Menu</td></tr>
         <tr>
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <button id = "demo_menu-lower-left"
                        class = "mdl-button mdl-js-button mdl-button--icon"
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-lower-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>
                     </ul>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>

            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <div class = "wrapper">
                        <button id = "demo_menu-lower-right"
                           class = "mdl-button mdl-js-button mdl-button--icon"
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-lower-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>

            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <button id = "demo_menu-top-left"
                        class = "mdl-button mdl-js-button mdl-button--icon"
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-top-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>
                     </ul>
                  </div>
               </div>
            </td>

            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <div class = "wrapper">
                        <button id = "demo_menu-top-right"
                           class = "mdl-button mdl-js-button mdl-button--icon"
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-top-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
               </div>
            </td>

         </tr>
      </table>
   </body>
</html>

結果

結果を確認します。

Material Design Lite-スライダー

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまなタイプのメニューを表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-slider

入力要素をMDLコンポーネントとして識別し、必須です。

2

mdl-js-slider

input要素に基本的なMDL動作を設定します。必須です。

例

次の例は、mdl-sliderクラスを使用してさまざまな種類のスライダーを表示する方法を理解するのに役立ちます。

mdl_sliders

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">

      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }
      </script>
   </head>

   <body>
      <table>
         <tr><td>Default Slider</td><td>Slider with initial value</td>
            <td>Disabled Slider</td></tr>
         <tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range"
            min = "0" max = "100" value = "0" tabindex = "0"
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"
            min = "0" max = "100" value = "25" tabindex = "0"
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"
            min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         </tr>
      </table>
      Value: <div id = "message" >25</div>
   </body>
</html>

結果

結果を確認します。

Material Design Lite-チェックボックス

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまなタイプのチェックボックスを表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-checkbox

ラベルをMDLコンポーネントとして識別し、ラベル要素に必要です。

2

mdl-js-checkbox

基本的なMDL動作をラベルに設定し、ラベル要素で必要です。

3

mdl-checkbox__input

基本的なMDL動作をチェックボックスに設定し、入力要素（チェックボックス）で必要です。

4

mdl-checkbox__label

基本的なMDL動作をキャプションに設定し、span要素（キャプション）で必要です。

5

mdl-js-ripple-effect

リップルクリック効果を設定し、オプションです。入力要素（チェックボックス）ではなく、ラベル要素に適用されます。

例

次の例は、mdl-sliderクラスを使用してさまざまなタイプのチェックボックスを表示する方法を理解するのに役立ちます。

mdl_checkboxes

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">

      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }
      </script>
   </head>

   <body>
      <table>
         <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
            <td>Disabled CheckBox</td></tr>

         <tr>
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1"
                     class = "mdl-checkbox__input" checked>
                  <span class = "mdl-checkbox__label">Married</span>
               </label>
            </td>

            <td>
               <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
                  for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                  <span class = "mdl-checkbox__label">Single</span>
               </label>
            </td>

            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3"
                     class = "mdl-checkbox__input" disabled>
                  <span class = "mdl-checkbox__label">Don't know (Disabled)</span>
               </label>
            </td>
         </tr>
      </table>

   </body>
</html>

結果

結果を確認します。

Material Design Lite-ラジオボタン

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまなタイプのラジオボタンを表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-radio

ラベルをMDLコンポーネントとして識別し、ラベル要素に必要です。

2

mdl-js-radio

基本的なMDL動作をラベルに設定し、ラベル要素で必要です。

3

mdl-radio__button

基本的なMDL動作をラジオに設定し、入力要素（ラジオボタン）で必要です。

4

mdl-radio__label

基本的なMDL動作をキャプションに設定し、span要素（キャプション）で必要です。

5

mdl-js-ripple-effect

リップルクリック効果を設定し、オプションです。入力要素（ラジオボタン）ではなく、ラベル要素に移動します。

例

次の例は、mdl-sliderクラスの使用を理解して、さまざまなタイプのラジオボタンを表示するのに役立ちます。

mdl_radio

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">

      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }
      </script>
   </head>

   <body>
      <table>
         <tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
            <td>Disabled Radio Button</td></tr>
         <tr>
            <td>
               <label class = "mdl-radio mdl-js-radio" for = "option1">
                  <input type = "radio" id = "option1" name = "gender"
                     class = "mdl-radio__button" checked>
                  <span class = "mdl-radio__label">Male</span>
               </label>
            </td>

            <td>
               <label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
                  for = "option2">
                  <input type = "radio" id = "option2" name = "gender"
                     class = "mdl-radio__button" >
                  <span class = "mdl-radio__label">Female</span>
               </label>
            </td>

            <td>
               <label class = "mdl-radio mdl-js-radio" for = "option3">
                  <input type = "radio" id = "option3" name = "gender"
                     class = "mdl-radio__button" disabled>
                  <span class = "mdl-radio__label">Don't know (Disabled)</span>
               </label>
            </td>
         </tr>
      </table>

   </body>
</html>

結果

結果を確認します。

Material Design Lite-アイコン

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまな種類のチェックボックスをアイコンとして表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-icon-toggle

ラベルをMDLコンポーネントとして識別し、ラベル要素に必要です。

2

mdl-js-icon-toggle

基本的なMDL動作をラベルに設定し、ラベル要素で必要です。

3

mdl-icon-toggle__input

基本的なMDL動作をアイコントグルに設定し、入力要素で必要です（アイコントグル）。

4

mdl-icon-toggle__label

基本的なMDL動作をキャプションに設定し、i要素（アイコン）で必要です。

5

mdl-js-ripple-effect

リップルクリック効果を設定し、オプションです。入力要素ではなくラベル要素に適用されます（icon-toggle）。

例

次の例では、 mdl-icon-toggle クラスを使用して、さまざまなタイプのチェックボックスをアイコンとして表示します。

mdl_icons

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <table>
         <tr><td>On Icon</td><td>Off Icon</td>
            <td>Disabled Icon</td></tr>
         <tr>
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
                  for = "icon-toggle-1">
                  <input type = "checkbox" id = "icon-toggle-1"
                     class = "mdl-icon-toggle__input" checked>
                  <i class = "mdl-icon-toggle__label material-icons">format_bold</i>
               </label>
            </td>

            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2"
                     class = "mdl-icon-toggle__input">
                  <i class = "mdl-icon-toggle__label material-icons">format_italic</i>
               </label>
            </td>

            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2"
                     class = "mdl-icon-toggle__input" disabled>
                  <i class = "mdl-icon-toggle__label material-icons">format_underline</i>
               </label>
            </td>
         </tr>
      </table>

   </body>
</html>

結果

結果を確認します。

Material Design Lite-スイッチ

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまな種類のチェックボックスをスイッチとして表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-switch

ラベルをMDLコンポーネントとして識別し、ラベル要素に必要です。

2

mdl-js-switch

基本的なMDL動作をラベルに設定し、ラベル要素で必要です。

3

mdl-switch__input

基本的なMDL動作を切り替えるように設定し、入力要素（スイッチ）で必要です。

4

mdl-switch__label

基本的なMDL動作をキャプションに設定し、入力要素（キャプション）で必要です。

5

mdl-js-ripple-effect

リップルクリック効果を設定し、オプションです。入力要素（スイッチ）ではなく、ラベル要素に適用されます。

例

次の例は、mdl-switchクラスとスイッチとしてのさまざまなタイプのチェックボックスの使用を理解するのに役立ちます。

mdl_switches

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <table>
         <tr><td>On Switch</td><td>Off Switch</td>
            <td>Disabled Switch</td></tr>
         <tr>
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                  for = "switch-1">
                  <input type = "checkbox" id = "switch-1"
                     class = "mdl-switch__input" checked>
               </label>
            </td>

            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2"
                     class = "mdl-switch__input">
               </label>
            </td>

            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2"
                     class = "mdl-switch__input" disabled>
               </label>
            </td>
         </tr>
      </table>
   </body>
</html>

結果

結果を確認します。

マテリアルデザインライト-DataTable

MDLは、事前定義されたさまざまな視覚的および動作の強化を適用し、テーブルをデータテーブルとして表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-data-table

テーブルをMDLコンポーネントとして識別し、テーブル要素で必要です。

2

mdl-js-data-table

基本的なMDL動作をテーブルに設定し、テーブル要素で必要です。

3

mdl-data-table—​selectable

すべて/個々の選択可能な動作（チェックボックス）を設定し、オプションです。テーブル要素に行きます。

4

mdl-data-table__cell—​non-numeric

テキストの書式設定をデータセルに設定します（オプション）。テーブルヘッダーとテーブルデータセルの両方に適用されます。

5

(none)

デフォルトでは、数値フォーマットをヘッダーまたはデータセルに設定します。

例

次の例は、 mdl-data-table クラスを使用してデータテーブルを表示する方法を理解するのに役立ちます。

mdl_data_tables

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>

   <body>
      <table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
         <thead>
            <tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
               <th>Class</th><th>Grade</th></tr>
         </thead>

         <tbody>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
               <td>VI</td><td>A</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
               <td>VI</td><td>B</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
               <td>VI</td><td>A</td></tr>
         </tbody>
      </table>

   </body>
</html>

結果

結果を確認します。

Material Design Lite-テキストフィールド

MDLは、事前定義されたさまざまな視覚的および動作強化を適用し、さまざまな種類のテキスト入力を表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-textfield

コンテナをMDLコンポーネントとして識別し、「外部」div要素で必要です。

2

mdl-js-textfield

基本的なMDL動作を入力に設定し、「外部」div要素で必要です。

3

mdl-textfield__input

要素をテキストフィールド入力として識別し、inputまたはtextarea要素で必要です。

4

mdl-textfield__label

要素をテキストフィールドラベルとして識別し、input要素またはtextarea要素のlabel要素で必要です。

5

mdl-textfield—​floating-label

フローティングラベル効果を適用し、オプションです。 「外部」div要素に進みます。

6

mdl-textfield__error

スパンをMDLエラーメッセージとして識別し、オプションです。パターンを持つMDL入力要素のspan要素になります。

7

mdl-textfield—​expandable

divをMDL拡張可能テキストフィールドコンテナーとして識別します。拡張可能な入力フィールドに使用され、「外部」div要素で必要です。

8

mdl-button

ラベルをMDLアイコンボタンとして識別します。拡張可能な入力フィールドに使用され、「外部」divのラベル要素で必要です。

9

mdl-js-button

基本的な動作をアイコンコンテナーに設定します。拡張可能な入力フィールドに使用され、「外部」divのラベル要素で必要です。

10

mdl-button—​icon

ラベルをMDLアイコンコンテナとして識別します。拡張可能な入力フィールドに使用され、「外部」divのラベル要素で必要です。

11

mdl-input__expandable-holder

コンテナーをMDLコンポーネントとして識別します。拡張可能な入力フィールドに使用され、「内部」div要素で必要です。

12

is-invalid

初期ロード時にテキストフィールドを無効として識別し、mdl-textfield要素ではオプションです。

例

次の例は、mdl-textfieldクラスを使用してさまざまな種類のテキストフィールドを表示する方法を理解するのに役立ちます。

mdl_textfields

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">

      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }
      </script>
   </head>

   <body>
      <table>
         <tr><td>Simple Text Field</td><td>Numeric Text Field</td>
            <td>Disabled Text Field</td></tr>
         <tr>
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </div>
               </form>
            </td>

            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text"
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
                     <label class = "mdl-textfield__label" for = "text2">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>

            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text"
                        id = "text3" disabled>
                     <label class = "mdl-textfield__label" for = "text3">
                        Disabled...</label>
                  </div>
               </form>
            </td>
         </tr>

         <tr><td>Simple Text Field with Floating Label</td>
            <td>Numeric Text Field with Floating Label</td>
            <td> </td></tr>
         <tr>
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" id = "text4">
                     <label class = "mdl-textfield__label" for = "text4">Text...</label>
                  </div>
               </form>
            </td>

            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text"
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
                     <label class = "mdl-textfield__label" for = "text5">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>

         <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
            <td> </td></tr>
         <tr>
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <textarea class = "mdl-textfield__input" type = "text" rows =  "3"
                        id = "text7" ></textarea>
                     <label class = "mdl-textfield__label" for = "text7">Lines...</label>
                  </div>
               </form>
            </td>

            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                     <label class = "mdl-button mdl-js-button mdl-button--icon"
                        for = "text8">
                        <i class = "material-icons">search</i>
                     </label>
                     <div class = "mdl-textfield__expandable-holder">
                        <input class = "mdl-textfield__input" type = "text" id = "text8">
                        <label class = "mdl-textfield__label" for = "sample-expandable">
                           Expandable Input</label>
                     </div>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>
   </body>
</html>

結果

結果を確認します。

Material Design Lite-ツールチップ

MDLは、事前定義されたさまざまな視覚的および動作の強化を適用し、さまざまな種類のツールチップを表示するための一連のCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

mdl-tooltip

コンテナーをMDLツールチップとして識別し、ツールチップコンテナー要素で必要です。

2

mdl-tooltip—​large

大きなフォント効果を設定し、オプションです。ツールチップコンテナ要素に進みます。

例

次の例は、 mdl-tooltip クラスを使用してさまざまな種類のツールチップを表示する方法を理解するのに役立ちます。

mdl_tooltips

<html>
   <head>
      <script
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">

      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }
      </script>
   </head>

   <body>
      <table>
         <tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip1" class = "icon material-icons">add</div>
               <div class = "mdl-tooltip" for = "tooltip1">Follow</div>
            </td>

            <td>
               <div id = "tooltip2" class = "icon material-icons">print</div>
               <div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
            </td>
         </tr>

         <tr>
            <td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
               <div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
            </td>

            <td>
               <div id = "tooltip4" class = "icon material-icons">share</div>
               <div class = "mdl-tooltip" for = "tooltip4">
                  Share your content<br>using social media</div>
            </td>
         </tr>
      </table>
   </body>
</html>

結果

結果を確認します。

「https://www.finddevguides.com/index.php?title=Materialdesignlite-quick-guide&oldid=79108」から取得
Powered by MediaWiki