マテリアルデザインライト-クイックガイド
マテリアルデザインライトとは何ですか？
Material Design Lite（MDLは、CSS、JavaScript、およびHTMLで作成されたUIコンポーネントライブラリです。MDLUIコンポーネントは、ブラウザーの移植性、デバイスの独立性などの最新のWebデザイン原則を遵守しながら、魅力的で一貫性のある機能的なWebページおよびWebアプリの構築に役立ちます。 、および優雅な劣化。
以下は、Material DesignLiteの主な機能です。
組み込みのレスポンシブデザイン。
フットプリントが最小限の標準CSS。
マテリアルデザインの概念に従うように適合された、ボタン、チェックボックス、テキストフィールドなどの一般的なユーザーインターフェイスコントロールの新しいバージョンが含まれています。
カード、列レイアウト、スライダー、スピナー、タブ、タイポグラフィなどの拡張された特殊な機能が含まれています。
ライブラリまたは開発環境の有無にかかわらず使用できます。
クロスブラウザであり、再利用可能なWebコンポーネントを作成するために使用できます。
レスポンシブデザイン
マテリアルデザインライトにはレスポンシブデザインが組み込まれているため、マテリアルデザインライトを使用して作成されたウェブサイトは、デバイスのサイズに応じて再設計されます。
Material Design Liteクラスは、Webサイトが任意の画面サイズに収まるように作成されています。
Material Design Liteを使用して作成されたWebサイトは、PC、タブレット、およびモバイルデバイスと完全に互換性があります。
標準CSS
Material Design Liteは標準のCSSのみを使用しており、習得は非常に簡単です。
jQueryなどの外部JavaScriptライブラリへの依存関係はありません。
ExtensibleMaterial Design Liteは、設計上、非常に最小限でフラットです。
これは、既存のCSSルールを上書きするよりも新しいCSSルールを追加する方がはるかに簡単であるという事実を考慮して設計されています。
影と大胆な色をサポートします。
色と色合いは、さまざまなプラットフォームやデバイス間で均一のままです。
そして何よりも重要なのは、MDLは完全に無料で使用できることです。
Material DesignLiteを使用する方法は2つあります-
Local Installation −ローカルマシンにmaterial。{primary}-{accent} .min.cssファイルとmaterial.min.jsファイルをダウンロードして、HTMLコードに含めることができます。
CDN Based Version −コンテンツ配信ネットワーク（CDN）から直接、material。{primary}-{accent} .min.cssファイルとmaterial.min.jsファイルをHTMLコードに含めることができます。
ローカルインストール
MDLのインストールについては、次の手順に従ってください-
に移動 https://www.getmdl.io/started/index.html 利用可能な最新バージョンをダウンロードします。
次に、ダウンロードしたものを入れます material.min.js あなたのウェブサイトのディレクトリにあるファイル、例えば/ jsと material.min.css / cssにあります。
例
これで、次のようにcssファイルとjsファイルをHTMLファイルに含めることができます。
<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ベースのバージョン
コンテンツ配信ネットワーク（CDN）から直接、jsファイルとcssファイルをHTMLコードに含めることができます。 storage.googleapis.com 最新バージョンのコンテンツを提供します。
このチュートリアルでは、storage.googleapis.comCDNバージョンのライブラリを使用しています。
例
ここで、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 DesignLiteのさまざまなレイアウトについて説明します。HTML5には次のコンテナ要素があります-
<div> −HTMLコンテンツに汎用コンテナを提供します。
<header> −ヘッダーセクションを表します。
<footer> −フッターセクションを表します。
<article> −記事を表します。
<section> −さまざまなタイプのセクションの汎用コンテナを提供します。
MDLは、さまざまなCSSクラスを提供して、さまざまな定義済みの視覚的および動作的拡張機能をコンテナーに適用します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 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 −基本的なMDL動作を外部divに追加します。
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.htm
<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.htm
<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.htm
<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.htm
<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.htm
<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.htm
<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.htm
<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（MDL）グリッドは、さまざまな画面サイズのコンテンツをレイアウトするためのコンポーネントです。MDLグリッドは、container / div要素によって定義および囲まれています。グリッドには、デスクトップサイズ画面に12列、タブレットサイズ画面に8列、電話サイズ画面に4列あり、各サイズには事前定義されたマージンとガターがあります。セルは、次の例外を除いて、定義された順序で順番に一列に配置されます。
グリッドセルがいずれかの画面サイズの行に適合しない場合、グリッドセルは次の行に流れます。
グリッドセルに、画面サイズの列数以上の指定された列サイズがある場合、グリッドセルは行全体を占めます。
MDLは、さまざまなCSSクラスを提供して、さまざまな定義済みの視覚的および動作的拡張をグリッドに適用します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 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 −基本的なMDL動作を外部divに追加します。
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.htm
<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（MDL）タブコンポーネントは、1つのスペースに複数の画面を排他的に表示するのに役立つユーザーインターフェイスコンポーネントです。
MDLは、さまざまなCSSクラスを提供して、さまざまな定義済みの視覚的および動作上の拡張機能をタブに適用します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 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 −基本的なMDL動作を外部divに追加します。
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.htm
<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>結果
結果を確認します。
MDLフッターコンポーネントには、主に2つの形式があります。 mega-footer そして mini-footer。メガフッターには、ミニフッターよりも複雑なコンテンツが含まれています。メガフッターは、水平方向のルールで区切られたコンテンツの複数のセクションを表すことができますが、ミニフッターはコンテンツの単一のセクションを表します。フッターには通常、リンクなどの情報コンテンツとクリック可能なコンテンツの両方が含まれています。
MDLは、メガフッターとミニフッターにさまざまな定義済みの視覚的および動作的拡張機能を適用するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 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 −基本的なMDL動作を外部divに追加します。
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.htm
<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 −基本的なMDL動作を外部divに追加します。
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.htm
<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>結果
結果を確認します。
MDLバッジコンポーネントは、数字またはアイコンの画面上の通知です。通常、アイテムの数を強調するために使用されます。
MDLは、バッジにさまざまな定義済みの視覚的および動作的拡張機能を適用するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 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.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作上の拡張機能をボタンに適用するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 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.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作的拡張機能を適用し、さまざまなタイプのカードを表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 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.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作の拡張機能を適用し、さまざまなタイプのプログレスバーを表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | mdl-js-progress 基本的なMDLの動作を進行状況インジケーターに設定します。これは必須のクラスです。 |
| 2 | mdl-progress__indeterminate アニメーションを進行状況インジケーターに設定します。これはオプションのクラスです。 |
例
次の例は、の使用法を理解するのに役立ちます mdl-js-progress さまざまなタイプのプログレスバーを表示するクラス。
mdl_progressbars.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作的拡張機能を適用し、さまざまなタイプのスピナーを表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | mdl-spinner コンテナをMDLスピナーコンポーネントとして識別し、必須のクラスです。 |
| 2 | mdl-js-spinner 基本的なMDLの動作をスピナーに設定します。これは必須のクラスです。 |
| 3 | is-active スピナーを表示およびアニメーション化し、オプションです。 |
| 4 | mdl-spinner--single-color 色を変更する代わりに単一の色を使用し、オプションです。 |
例
次の例は、の使用法を理解するのに役立ちます mdl-spinner クラスとさまざまな種類のスピナー。
mdl_spinners.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作的拡張機能を適用し、さまざまなタイプのメニューを表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 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.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作的拡張機能を適用し、さまざまなタイプのメニューを表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | mdl-slider 入力要素をMDLコンポーネントとして識別し、必須です。 |
| 2 | mdl-js-slider 基本的なMDL動作を入力要素に設定します。これは必須です。 |
例
次の例は、mdl-sliderクラスを使用してさまざまなタイプのスライダーを表示する方法を理解するのに役立ちます。
mdl_sliders.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作の拡張機能を適用し、さまざまなタイプのチェックボックスを表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | mdl-checkbox ラベルをMDLコンポーネントとして識別し、ラベル要素に必要です。 |
| 2 | mdl-js-checkbox 基本的なMDLの動作をlabelに設定し、label要素に必要です。 |
| 3 | mdl-checkbox__input 基本的なMDLの動作をチェックボックスに設定し、入力要素（チェックボックス）で必須です。 |
| 4 | mdl-checkbox__label 基本的なMDLの動作をキャプションに設定し、スパン要素（キャプション）で必要です。 |
| 5 | mdl-js-ripple-effect リップルクリック効果を設定し、オプションです。入力要素（チェックボックス）ではなく、ラベル要素に配置されます。 |
例
次の例は、mdl-sliderクラスを使用してさまざまなタイプのチェックボックスを表示する方法を理解するのに役立ちます。
mdl_checkboxes.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作の拡張機能を適用し、さまざまなタイプのラジオボタンを表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | mdl-radio ラベルをMDLコンポーネントとして識別し、ラベル要素に必要です。 |
| 2 | mdl-js-radio 基本的なMDLの動作をlabelに設定し、label要素に必要です。 |
| 3 | mdl-radio__button 基本的なMDL動作を無線に設定し、入力要素（ラジオボタン）で必要です。 |
| 4 | mdl-radio__label 基本的なMDLの動作をキャプションに設定し、スパン要素（キャプション）で必要です。 |
| 5 | mdl-js-ripple-effect リップルクリック効果を設定し、オプションです。入力要素（ラジオボタン）ではなく、ラベル要素に移動します。 |
例
次の例は、mdl-sliderクラスを使用してさまざまなタイプのラジオボタンを表示する方法を理解するのに役立ちます。
mdl_radio.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作の拡張機能を適用し、さまざまなタイプのチェックボックスをアイコンとして表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | mdl-icon-toggle ラベルをMDLコンポーネントとして識別し、ラベル要素に必要です。 |
| 2 | mdl-js-icon-toggle 基本的なMDLの動作をlabelに設定し、label要素に必要です。 |
| 3 | mdl-icon-toggle__input 基本的なMDLの動作をicon-toggleに設定し、入力要素（icon-toggle）で必要です。 |
| 4 | mdl-icon-toggle__label 基本的なMDLの動作をキャプションに設定し、i要素（アイコン）で必要です。 |
| 5 | mdl-js-ripple-effect リップルクリック効果を設定し、オプションです。入力要素ではなく、ラベル要素に移動します（アイコンの切り替え）。 |
例
次の例は、の使用法を示しています。 mdl-icon-toggle さまざまなタイプのチェックボックスをアイコンとして表示するクラス。
mdl_icons.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作の拡張機能を適用し、さまざまなタイプのチェックボックスをスイッチとして表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | mdl-switch ラベルをMDLコンポーネントとして識別し、ラベル要素に必要です。 |
| 2 | mdl-js-switch 基本的なMDLの動作をlabelに設定し、label要素に必要です。 |
| 3 | mdl-switch__input 基本的なMDL動作をスイッチに設定し、入力要素（スイッチ）で必要です。 |
| 4 | mdl-switch__label 基本的なMDLの動作をキャプションに設定し、入力要素（キャプション）で必要です。 |
| 5 | mdl-js-ripple-effect リップルクリック効果を設定し、オプションです。入力要素（スイッチ）ではなく、ラベル要素に配置されます。 |
例
次の例は、mdl-switchクラスの使用法とスイッチとしてのさまざまなタイプのチェックボックスを理解するのに役立ちます。
mdl_switches.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作の拡張機能を適用し、テーブルをデータテーブルとして表示するための一連のCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 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.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作的拡張機能を適用し、さまざまなタイプのテキスト入力を表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 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入力要素のスパン要素に進みます。 |
| 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.htm
<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>結果
結果を確認します。
MDLは、さまざまな定義済みの視覚的および動作の拡張機能を適用し、さまざまなタイプのツールチップを表示するためのさまざまなCSSクラスを提供します。次の表に、使用可能なクラスとその効果を示します。
| シニア番号 | クラス名と説明 |
|---|---|
| 1 | mdl-tooltip コンテナをMDLツールチップとして識別し、ツールチップコンテナ要素に必要です。 |
| 2 | mdl-tooltip--large 大活字効果を設定し、オプションです。ツールチップコンテナ要素に進みます。 |
例
次の例は、の使用法を理解するのに役立ちます mdl-tooltip さまざまなタイプのツールチップを表示するクラス。
mdl_tooltips.htm
<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>結果
結果を確認します。