Materialize-quick-guide

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

マテリアライズ-概要

Materializeは、CSS、JavaScript、およびHTMLで作成されたUIコンポーネントライブラリです。 マテリアライズ再利用可能なUIコンポーネントは、魅力的で一貫性のある機能的なWebページとWebアプリの構築を支援すると同時に、ブラウザーの移植性、デバイスの独立性、グレースフルデグラデーションなどの最新のWebデザインの原則を順守します。

その顕著な特徴のいくつかは次のとおりです-

  • 組み込みのレスポンシブデザイン。
  • フットプリントが最小限の標準CSS。
  • マテリアルデザインの概念に従うようになったボタン、チェックボックス、テキストフィールドなどの一般的なユーザーインターフェイスコントロールの新しいバージョン。
  • カード、タブ、ナビゲーションバー、トーストなどの強化された特殊な機能。
  • 無料で使用でき、jQuery JavaScriptライブラリが適切に機能する必要があります。
  • クロスブラウザ。再利用可能なWebコンポーネントの作成に使用できます。

レスポンシブデザイン

マテリアライズにはレスポンシブデザインが組み込まれているため、マテリアライズを使用して作成されたウェブサイトは、デバイスのサイズに応じて再設計されます。 マテリアライズクラスは、Webサイトが任意の画面サイズに適合するように作成されます。

Materializeを使用して作成されたWebサイトは、PC、タブレット、およびモバイルデバイスと完全に互換性があります。

拡張可能

マテリアライズは、設計上非常に最小限でフラットです。 既存のCSSルールを上書きするよりも新しいCSSルールを追加する方がはるかに簡単であるという事実を考慮して設計されています。 影と大胆な色をサポートしています。 色と濃淡は、さまざまなプラットフォームとデバイスで均一です。

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

マテリアライズ-環境設定

この章では、マテリアライズのための環境を整えるさまざまな側面について説明します。

'__ === オンラインで試す

利用可能なすべてのサンプルをオンラインでコンパイルして実行できるように、マテリアライズプログラミング環境をオンラインで設定しました。 読んでいるものに自信を与え、さまざまなオプションでプログラムを検証することができます。 サンプルを自由に変更して、オンラインで実行してください。

CodingGroundから入手できるオンラインコンパイラを使用して、次の例を試してください。 

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

このチュートリアルに記載されているほとんどの例では、オンラインコンパイラにアクセスできる右上隅のWebサイトコードセクションに[試用]オプションがあります。 だからそれを利用して、あなたの学習を楽しんでください。 '__

マテリアライズの使用方法

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

ローカルインストール-ローカルマシンに materialize.min.css および materialize.min.js ファイルをダウンロードして、HTMLコードに含めることができます。

  • CDNベースバージョン*- materialize.min.css および materialize.min.js ファイルを、コンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。

ローカルインストール

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

例

次のように、HTMLファイルに css および js ファイルを含めます。 

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "/materialize/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "/materialize/materialize.min.js"></script>
   </head>

   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

次の結果が生成されます。

CDNベースのバージョン

*materialize.min.js* および *materialize.min.css* ファイルを、コンテンツ配信ネットワーク（CDN）から直接HTMLコードに含めることができます。 *cdnjs.cloudflare.com* は、最新バージョンのコンテンツを提供します。

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

例

cdnjs.cloudflare.com CDNの materialize.min.css および materialize.min.js を使用して上記の例を書き換えます。 

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
      </script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body>
      <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
   </body>
</html>

それは次の結果を生成します-

マテリアライズ-色

マテリアライズは、豊富なカラークラスのセットをサポートしています。 これらのカラークラスは、マーケティング、道路標識、および付箋で使用される色を考慮してインスピレーションと開発が行われています。

  • red
  • pink
  • 紫の
  • ディープ・パープル
  • インジゴ
  • blue
  • ライトブルー
  • cyan
  • teal
  • 緑
  • 薄緑
  • lime
  • 黄
  • アンバー
  • オレンジ
  • 深いオレンジ色
  • 褐色
  • grey
  • 青灰色
  • 黒
  • 白
  • トランスペアレント

使用法

以下は、適用される色を変更するために使用できる明暗クラスのリストです。

  • 明るくする-1
  • 明るくする-2
  • 明るく-3
  • 明るく-4
  • 明るくする-5
  • darken-1
  • 暗くなる-2
  • darken-3
  • 暗く-4
  • アクセント-1
  • アクセント-2
  • アクセント-3
  • アクセント-4

例

次の例は、上記のクラスを使用して背景をレンダリングしたり、テキストの色を変更したりする方法を示しています。 背景の場合はクラスを追加し、テキストの場合はカラークラスにサフィックス「-text」を、ライトニングクラスに「text-」をプレフィックスします。

materialize_colors

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Colors Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body>
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "card-panel">
         <div class = "card-panel red lighten-2">
            <h1>Red Colored Theme</h1>
         </div>

         <span class = "red-text text-darken-2">
            <h2>Red Colored Text</h2>
         </span>

         <ul>
            <li class = "red lighten-5"><p>Using red lighten-5</p></li>
            <li class = "red lighten-4"><p>Using red lighten-4</p></li>
            <li class = "red lighten-3"><p>Using red lighten-3</p></li>
            <li class = "red lighten-2"><p>Using red lighten-2</p></li>
            <li class = "red lighten-1"><p>Using red lighten-1</p></li>
            <li class = "red"><p>Using red</p></li>
            <li class = "red darken-1"><p>Using red darken-1</p></li>
            <li class = "red darken-2"><p>Using red darken-2</p></li>
            <li class = "red darken-3"><p>Using red darken-3</p></li>
            <li class = "red darken-4"><p>Using red darken-4</p></li>
            <li class = "red accent-1"><p>Using red accent-1</p></li>
            <li class = "red accent-2"><p>Using red accent-2</p></li>
            <li class = "red accent-3"><p>Using red accent-3</p></li>
            <li class = "red accent-4"><p>Using red accent-4</p></li>
         </ul>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-グリッド

Materializeは、12列の流体応答グリッドを提供します。

行と列のスタイルクラスを使用して、それぞれ行と列を定義します。

Sr.No. Class Name & Description
1

row

レスポンシブ列に使用するパディングなしのコンテナーを指定します。 このクラスは、レスポンシブクラスが完全にレスポンシブであるために必須です。

2

col

サブクラスを持つ列を指定します。 

*col* には、さまざまな種類の画面を対象としたいくつかのサブクラスがあります。

小画面デバイス用の列

以下は、小さな画面デバイス、通常はスマートフォンの列レベルのスタイルのリストです。

シニア

クラス名と説明

1

s1

幅が08.33％の12列のうち1列を定義します。

2

s2

16.66％の幅で12列のうち2列を定義します。

3

s3

幅が25.00％の12列のうち3列を定義します。

4

s4

33.33％の幅で12列のうち4列を定義します。 

*s5-s11*

12 

*s12*

12列のうち12列を幅100％で定義します。 スモールスクリーンフォンのデフォルトクラス。

中画面デバイス用の列

以下は、中程度の画面のデバイス（通常はタブレット）の列レベルのスタイルのリストです。

シニア

クラス名と説明

1

m1

幅が08.33％の12列のうち1列を定義します

2

m2

16.66％の幅で12列のうち2列を定義します。

3

m3

幅が25.00％の12列のうち3列を定義します。

4

m4

33.33％の幅で12列のうち4列を定義します。 

*m5-m11*

12 

*m12*

12列のうち12列を幅100％で定義します。 中型の携帯電話のデフォルトクラス。

大画面デバイス用の列

以下は、大画面デバイス（通常はラップトップ）の列レベルのスタイルのリストです。

シニア

クラス名と説明

1

l1

幅が08.33％の12列のうち1列を定義します。

2

l2

16.66％の幅で12列のうち2列を定義します。

3

l3

幅が25.00％の12列のうち3列を定義します。

4

l4

33.33％の幅で12列のうち4列を定義します。 

*l5-l11*

12 

*l12*

12列のうち12列を幅100％で定義します。 大画面デバイスのデフォルトクラス。

使用法

各サブクラスは、デバイスのタイプに基づいて、使用するグリッドの列数を決定します。 次のHTMLスニペットを考えてください。 

<div class = "row">
   <div class = "col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
      a large screen.</p>
   </div>
</div>

HTML要素のclass属性でサブクラスが指定されていない場合、デバイスで使用されるデフォルトの列は12です。

例

materialize_grids

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Grids Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body>
      <div class = "teal">
         <h2>Mobile First Design Demo</h2>
         <p>Resize the window to see the effect!</p>
      </div>

      <hr/>
      <div class = "row">
         <div class = "col m1 grey center">1</div>
         <div class = "col m1 center">2</div>
         <div class = "col m1 grey center">3</div>
         <div class = "col m1 center">4</div>
         <div class = "col m1 grey center">5</div>
         <div class = "col m1 center">6</div>
         <div class = "col m1 center grey">7</div>
         <div class = "col m1 center">8</div>
         <div class = "col m1 center grey">9</div>
         <div class = "col m1 center">10</div>
         <div class = "col m1 center grey">11</div>
         <div class = "col m1 center">12</div>
      </div>

      <div class = "row">
         <div class = "col m4 l3 yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
               and 3 on a large screen (l3).</p>
         </div>

         <div class = "col s4 m8 l9 grey">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
               (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-ヘルパー

Materializeには、日々の設計ニーズに役立ついくつかのユーティリティクラスがあります。

  • カラーユーティリティクラス-たとえば、.red、.green、.greyなど
  • アライメントユーティリティクラス-たとえば、.valign-wrapper、.left-align、.rightalign、.center-align、.left、.right
  • デバイスサイズごとのコンテンツユーティリティクラスの非表示-たとえば、.hide、.hideon-small-only、.hide-on-med-only、.hide-on-med-and-down、.hide-on-med -and-upおよび.hide-on-large-only
  • ユーティリティクラスのフォーマット-たとえば、truncate、hoverable

例

*materialize_utilities*
<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family = Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
      </script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <h2>Materialize Utilities</h2>

      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class = "red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
            all support many HTML5 features and Internet Explorer 9.0 will also have
            support for some HTML5 functionality.</p>
      </div>

      <div class = "green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android
            phones all have excellent support for HTML5.</p>
      </div>

      <h3>Alignment Utilities Demo</h3>
      <div class = "card-panel valign-wrapper">
         <p class = "valign">Vertically Aligned Text</p>
      </div>

      <div class = "card-panel">
         <div><p class = "left-align">Left Aligned Text</p></div>
         <div><p class = "right-align">Right Aligned Text</p></div>
         <div><p class = "center-align">Center Aligned Text</p></div>
      </div>

      <h3>Hide Utilities Demo</h3>
      <div class = "hide">
         <p>Hidden on all devices</p>
      </div>

      <div class = "hide-on-small-only">
         <p>Hidden on mobile devices</p>
      </div>

      <h3>Formatting Utilities Demo</h3>
      <div class = "card-panel">
         <p class = "truncate">The latest versions of Apple Safari, Google Chrome,
            Mozilla Firefox, and Opera all support many HTML5 features and Internet
            Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>

      <div class = "card-panel hoverable">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and
            Android phones all have excellent support for HTML5.</p>
      </div>

      <h3>Center Utility Demo</h3>
      <div class = "card-panel center">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-メディア

Materializeには、さまざまなサイズに対応する画像や動画を作成するためのクラスがいくつかあります。

  • responsive-img -画面サイズに基づいて画像のサイズを変更します。
  • video-container -ビデオが埋め込まれたレスポンシブコンテナ用。
  • responsive-video -HTML5ビデオをレスポンシブにします。

例

materialize_media

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <h2>Materialize Media Examples</h2>

      <hr/>
      <h3>Images Demo</h3>
      <div class = "card-panel">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "responsive-img">
      </div>

      <div class = "card-panel">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "circle responsive-img">
      </div>

      <h3>Responsive Embeded Video Demo</h3>
      <div class = "video-container">
         <iframe width = "540" height = "200"
            src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
            frameborder = "0" allowfullscreen></iframe>
      </div>

      <div class = "video-container">
         <video  width = "300" height = "200" controls autoplay>
            <source src = "http://www.finddevguides.com/html5/foo.ogg" type = "video/ogg"/>
            <source src = "http://www.finddevguides.com/html5/foo.mp4" type = "video/mp4"/>
            Your browser does not support the video element.
         </video>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-影

マテリアライズには、コンテナを影付きの紙のようなカードとして表示するための特別なクラスがいくつかあります。

Sr.No. Class Name & Description
1

z-depth-0

デフォルトでZ深度を持つ要素の影を削除します。

2

z-depth-1

1pxの境界線付きシャドウを使用して、HTMLコンテンツのコンテナをスタイルします。 1のz深度を追加します。

3

z-depth-2

2pxの境界線付きシャドウを使用して、HTMLコンテンツのコンテナをスタイルします。 2のz深度を追加します。

4

z-depth-3

3pxの境界線付きシャドウを使用して、HTMLコンテンツのコンテナをスタイルします。 3のZ深度を追加します。

5

z-depth-4

4pxのボーダー付きシャドウを使用して、HTMLコンテンツのコンテナをスタイルします。 4のz深度を追加します。

6

z-depth-5

5pxの境界線付きシャドウを使用して、HTMLコンテンツのコンテナをスタイルします。 5のz深度を追加します。

例

materialize_shadows

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>

      <style>
         div {
            width : 200px;
            height : 200px;
         }
      </style>
   </head>

   <body class = "container">
      <h2>Materialize Shadow Examples</h2>

      <hr/>
      <div class = "card-panel">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>

      <div class = "z-depth-1">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>

      <div class = "z-depth-2">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>

      <div class = "z-depth-3">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>

      <div class = "z-depth-4">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>

      <div class = "z-depth-5">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-テーブル

マテリアライズを使用して、さまざまなスタイルのテーブルを使用してさまざまなタイプのテーブルを表示できます。

Sr.No. Class Name & Description
1

None

境界線のない基本的なテーブルを表します。

2

stripped

ストリップされたテーブルを表示します。

3

bordered

行をまたぐ境界線を持つ表を描画します。

4

highlight

強調表示されたテーブルを描画します。

5

centered

すべてのテキストの中心がテーブル内に配置されたテーブルを描画します。

6

responsive-table

画面が小さすぎてコンテンツを表示できない場合、レスポンシブテーブルを描画して水平スクロールバーを表示します。

例

materialize_tables

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>

      <style>
         div {
            width : 200px;
            height : 200px;
         }
      </style>
   </head>

   <body class = "container">
      <h2>Tables Demo</h2>

      <hr/>
      <h3>Simple Table</h3>
      <table>
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>

         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>

            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>

            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>

      <h3>Stripped Table with borders</h3>
      <table class = "striped bordered">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>

         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>

            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>

            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>

      <hr/>
      <h3>Centered Table</h3>
      <table class = "centered">
         <thead>
            <tr><th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>

         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>

            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>

            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>

      <h3>Responsive table</h3>
      <table class = "responsive-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Data #1</th>
               <th>Data #2</th>
               <th>Data #3</th>
               <th>Data #4</th>
               <th>Data #5</th>
               <th>Data #6</th>
               <th>Data #7</th>
               <th>Data #8</th>
               <th>Data #9</th>
               <th>Data #10</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>10</td>
               <td>11</td>
               <td>12</td>
               <td>13</td>
               <td>14</td>
               <td>15</td>
               <td>16</td>
               <td>17</td>
               <td>19</td>
               <td>20</td>
            </tr>

            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>10</td>
               <td>11</td>
               <td>12</td>
               <td>13</td>
               <td>14</td>
               <td>15</td>
               <td>16</td>
               <td>17</td>
               <td>19</td>
               <td>20</td>
            </tr>

            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>10</td>
               <td>11</td>
               <td>12</td>
               <td>13</td>
               <td>14</td>
               <td>15</td>
               <td>16</td>
               <td>17</td>
               <td>19</td>
               <td>20</td>
            </tr>
          </tbody>
       </table>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-タイポグラフィ

Materializeは、標準フォントとして Roboto 2.0 を使用します。 次のCSSスタイルを使用してオーバーライドできます。 

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

以下は、見出し、ブロック引用、フリーフローで応答性の高いテキストの例です。

例

タイポグラフィを具体化する

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Typography Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <h2>Typography Demo</h2>
      <hr/>

      <h3>Headings</h3>
      <div class = "card-panel">
         <h1>Heading 1</h1>
         <h2>Heading 2</h2>
         <h3>Heading 3</h3>
         <h4>Heading 4</h4>
         <h5>Heading 5</h5>
         <h6>Heading 6</h6>
      </div>

      <h3>Block Quotes</h3>
      <div class = "card-panel">
         <blockquote>
            The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
            all support many HTML5 features and Internet Explorer 9.0 will also have
            support for some HTML5 functionality.
         </blockquote>
      </div>

      <h3>Responsive free-flow text</h3>
      <div class = "card-panel">
         <p class = "flow-text">
            The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
            all support many HTML5 features and Internet Explorer 9.0 will also have
            support for some HTML5 functionality.
         </p>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-バッジ

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

Sr.No. Class Name & Description
1

badge

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

2

new

「新しい」クラスをバッジコンポーネントに追加して、背景を与えます。

以下は、さまざまな方法でバッジを使用する例です。

例

materialize_badges

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Badges Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <h2>Badges Demo</h2>
      <hr/>

      <h3>Badges in List</h3>
      <div class = "collection">
         <a href = "#" class = "collection-item">Inbox<span class = "badge">12</span></a>
         <a href = "#" class = "collection-item">Unread<span class = "new badge">4</span></a>
         <a href = "#" class = "collection-item">Sent</a>
         <a href = "#" class = "collection-item">Outbox<span class = "badge">14</span></a>
      </div>

      <h3>Badges in dropdowns</h3>
      <ul id = "dropdown" class = "dropdown-content">
         <li><a href = "#">Inbox<span class = "badge">12</span></a></li>
         <li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
         <li><a href = "#">Sent</a></li>
         <li><a href = "#">Outbox<span class = "badge">14</span></a></li>
      </ul>

      <a class = "btn dropdown-button" href = "#" data-activates = "dropdown">
         Dropdown<i class = "mdi-navigation-arrow-drop-down right"></i></a>
      <h3>Badges in Navigation</h3>
      <nav>
         <div class = "nav-wrapper">
            <a href = "" class = "brand-logo">finddevguides</a>
            <ul id = "nav-mobile" class = "right hide-on-med-and-down">
               <li><a href = "">Inbox</a></li>
               <li><a href = "">Unread<span class = "new badge">4</span></a></li>
               <li><a href = "#">Sent</a></li>
               <li><a href = "#">Outbox</a></li>
            </ul>
         </div>
      </nav>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-ボタン

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

Sr.No. Class Name & Description
1

btn

必須のボタンまたはアンカーをマテリアライズボタンとして設定します。 ボタンに上げられた表示効果を設定します。

2

btn-floating

円形ボタンを作成します。

3

btn-flat

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

4

btn-large

大きなボタンを作成します。

5

disabled

無効なボタンを作成します。

6

type = "submit"

アンカーまたはボタンをプライマリボタンとして表します。

7

waves-effect

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

例

次の例は、mdl-buttonクラスを使用してさまざまな種類のボタンを表示する方法を示しています。

materialize_buttons

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Buttons Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <div class = "card-panel">
         <h5>Raised Buttons</h5>
         <button class = "btn waves-effect waves-teal">Add</button></td>
         <button class = "btn waves-effect waves-teal">
            <i class = "material-icons left">add</i>Add</button></td>
         <button class = "btn waves-effect waves-teal">
            <i class = "material-icons right">add</i>Add</button></td>
         <button class = "btn waves-effect waves-teal disabled">Add</button></td>
      </div>

      <div class = "card-panel">
         <h5>Flat Buttons</h5>
         <button class = "btn-flat waves-effect waves-teal">Add</button></td>
         <button class = "btn-flat waves-effect waves-teal disabled" >
            <i class = "material-icons left">add</i>Add</button></td>
      </div>

      <div class = "card-panel">
         <h5>Floating Buttons</h5>
         <a class = "btn-floating waves-effect waves-light red">
            <i class = "material-icons">add</i></a>
         <a class = "btn-floating waves-effect waves-light red disabled" >
            <i class = "material-icons">add</i></a>
      </div>

      <div class = "card-panel">
         <h5>Primary Buttons</h5>
         <button class = "btn waves-effect waves-light red" type = "submit">Send
            <i class = "material-icons right">send</i></button>
         <button class = "btn waves-effect waves-light red disabled" type = "submit" >Cancel
            <i class = "material-icons right">cancel</i></button>
      </div>

      <div class = "card-panel">
         <h5>Large Buttons</h5>
         <a class = "btn-floating btn-large waves-effect waves-light red">
            <i class = "material-icons">add</i></a>
         <a class = "btn-floating btn-large waves-effect waves-light red disabled">
            <i class = "material-icons">add</i></a>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-BreadCrumb

Materializeには、簡単な方法で素敵なパンくずリストを作成するためのさまざまなCSSクラスが用意されています。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

nav-wrapper

navコンポーネントをbreadcrumb/navバーラッパーとして設定します。

2

breadcrumb

アンカー要素をブレッドクラムとして設定します。 最後のアンカー要素はアクティブですが、残りはグレー表示されています。

例

次の例は、パンくずリストクラスを使用してナビゲーションバーを紹介する方法を示しています。

materialize_breadcrumb

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize BreadCrumb Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <nav>
         <div class = "nav-wrapper">
            <div class = "col s12">
               <a href = "#" class = "breadcrumb">Home</a>
               <a href = "#" class = "breadcrumb">Technology</a>
               <a href = "#" class = "breadcrumb">HTML5</a>
            </div>
         </div>
      </nav>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-カード

マテリアライズは、さまざまな種類のカードを表示するために、さまざまな事前定義の視覚的および動作強化を適用するためのさまざまなCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

card

div要素をマテリアライズカードコンテナーとして識別します。 「外部」divで必要です。

2

card-content

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

3

card-title

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

4

card-action

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

5

card-image

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

6

card-reveal

divを公開テキストコンテナとして識別します。

7

activator

divを公開されたテキストコンテナおよび画像として表示し、表示するようにします。 画像に関連するコンテキスト情報を表示するために使用されます。

8

card-panel

divを、影とパディングを持つ単純なカードとして識別します。

9

card-small

divを小さなサイズのカードとして識別します。 高さ：300px;

10

card-medium

divを中サイズのカードとして識別します。 高さ：400px;

11

card-large

divを大きなサイズのカードとして識別します。 高さ：500px;

例

次の例では、カードクラスを使用してさまざまな種類のカードを紹介します。

materialize_cards

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Cards Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <div class = "row">
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-content">
                  <span class = "card-title"><h3>Learn HTML5</h3></span>
                  <p>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.</p>
               </div>

               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "http://www.finddevguides.com">
                     www.finddevguides.com</a>
               </div>
            </div>
         </div>

         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-image">
                  <img src = "html5-mini-logo.jpg">
               </div>

               <div class = "card-content">
                  <p>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.</p>
               </div>

               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "http://www.finddevguides.com">
                     www.finddevguides.com</a>
               </div>
            </div>
         </div>
      </div>

      <div class = "row">
         <div class = "col s12 m6">
            <div class = "card blue-grey lighten-4">
               <div class = "card-image waves-effect waves-block waves-light">
                  <img class = "activator" src = "html5-mini-logo.jpg">
               </div>

               <div class = "card-content activator">
                  <p>Click the image to reveal more information.</p>
               </div>

               <div class = "card-reveal">
                  <span class = "card-title grey-text text-darken-4">HTML5
                     <i class = "material-icons right">close</i></span>
                  <p>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.</p>
               </div>

               <div class = "card-action">
                  <button class = "btn waves-effect waves-light blue-grey">
                     <i class = "material-icons">share</i></button>
                  <a class = "right blue-grey-text" href = "http://www.finddevguides.com">
                     www.finddevguides.com</a>
               </div>
            </div>
         </div>
      </div>

      <div class = "row">
         <div class = "col s12 m3">
            <div class = "card-panel teal">
               <span class = "white-text">Simple Card</span>
            </div>
         </div>

         <div class = "col s12 m3">
            <div class = "card small teal">
               <span class = "white-text">Small Card</span>
            </div>
         </div>

         <div class = "col s12 m3">
            <div class = "card medium teal">
               <span class = "white-text">Medium Card</span>
            </div>
         </div>

         <div class = "col s12 m3">
            <div class = "card large teal">
               <span class = "white-text">Large Card</span>
            </div>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-チップ

マテリアライズは、チップと呼ばれる特別なコンポーネントを提供します。これは、小さな情報セットを表すために使用できます。 たとえば、連絡先、タグなど。

Sr.No. Class Name & Description
1

chip

divコンテナーをチップとして設定します。

例

次の例は、チップクラスを使用してさまざまなタイプのタグを作成する方法を示しています。

materialize_chips

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Chips Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <div class = "chip">
         <img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg">HTML 5
      </div>

      <div class = "chip">
         HTML 5<i class = "material-icons">close</i>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-コレクション

マテリアライズは、さまざまなタイプのコレクションを表す特別なクラスを提供します。コレクションは、関連する情報アイテムのグループを表します。

Sr.No. Class Name & Description
1

collection

divまたはulコンテナをコレクションとして設定します。

2

collection-item

aまたはliアイテムをコレクションアイテムとして設定します。

3

active

aまたはliアイテムをアクティブなコレクションアイテムとして表示します。

4

with-header

コレクションにヘッダーを設定します。

5

collection-header

コレクションヘッダーとしてaまたはliアイテムを設定します。

6

avatar

aまたはliアイテムをアバターアイテムとして設定します。

7

dismissible

コレクションアイテムをスワイプで削除できるようにします。 タッチスクリーンデバイスでのみ動作します。

例

次の例は、コレクションクラスを使用してさまざまなタイプのコレクションを作成する方法を示しています。

materialize_collections

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Collections Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <h3>Simple Collection</h3><hr/>
      <ul class = "collection">
         <li class = "collection-item">HTML 5</li>
         <li class = "collection-item">JQuery</li>
         <li class = "collection-item">JavaScript</li>
         <li class = "collection-item">CSS</li>
      </ul>

      <h3>Collection of Links</h3><hr/>
      <div class = "collection">
         <a href = "#" class = "collection-item">HTML 5</a>
         <a href = "#!" class = "collection-item active">JQuery</a>
         <a href = "#!" class = "collection-item">JavaScript</a>
         <a href = "#!" class = "collection-item">CSS</a>
      </div>

      <h3>Collection with Header</h3><hr/>
      <ul class = "collection with-header">
         <li class = "collection-header"><h3>Front End Technologies</h3></li>
         <li class = "collection-item">HTML 5</li>
         <li class = "collection-item">JQuery</li>
         <li class = "collection-item">JavaScript</li>
         <li class = "collection-item">CSS</li>
      </ul>

      <h3>Collection with Secondary Content</h3><hr/>
      <ul class = "collection">
         <li class = "collection-item">
            <div>HTML 5<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>JQuery<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>JavaScript<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
         <li class = "collection-item">
            <div>CSS<a href = "#!" class = "secondary-content">
               <i class = "material-icons">cloud</i></a></div></li>
      </ul>

      <h3>Collection with Avatar</h3><hr/>
      <ul class = "collection">
         <li class = "collection-item avatar">
            <img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg" class = "circle">
            <span class = "title">HTML5</span>
            <p>HTML5 is the next major revision of the HTML standard superseding
               HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for
               structuring and presenting content on the World Wide Web.</p>
            <a href = "#!" class = "secondary-content"><i class = "material-icons">
               grade</i></a>
         </li>

         <li class = "collection-item avatar">
            <i class = "material-icons circle green">insert_chart</i>
            <span class = "title">HighCharts</span>
            <p></p>
            <a href = "#!" class = "secondary-content"><i class = "material-icons">
               grade</i></a>
         </li>
      </ul>

      <h3>Collection with dismissible content</h3><hr/>
      <ul class = "collection">
         <li class = "collection-item dismissable">HTML 5</li>
         <li class = "collection-item dismissable">JQuery</li>
         <li class = "collection-item dismissable">JavaScript</li>
         <li class = "collection-item dismissable">CSS</li>
      </ul>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-フッター

Materializeは、コレクションが関連情報項目のグループを表すさまざまなタイプのコレクションを表す特別なクラスを提供します。

Sr.No. Class Name & Description
1

page-footer

divコンテナをフッターとして設定します。

2

footer-copyright

divコンテナーをフッター著作権コンテナーとして設定します。

例

次の例では、フッタークラスを使用してサンプルフッターを紹介します。

materialize_footer

<html>
   <head>
      <title>The Materialize Collections Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <footer class = "page-footer">
         <div class = "row">
            <div class = "col s12 m6 l6">
               <h5 class = "white-text">Footer Content</h5>
            </div>

            <div class = "col">
               <ul>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     Help</a></li>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     Privacy and Terms</a></li>
                  <li><a href = "#" class = "grey-text text-lighten-4 right">
                     User Agreement</a></li>
               </ul>
            </div>
         </div>

         <div class = "footer-copyright">
            <div class = "container">
               © 2016 Copyright Information
               <a class = "grey-text text-lighten-4 right" href = "#!">Links</a>
            </div>
         </div>
       </footer>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-フォーム

Materializeには、フォームデザイン用の非常に美しく反応の良いCSSがあります。 次のCSSが使用されます-

Sr.No. Class Name & Description
1

input-field

divコンテナを入力フィールドコンテナとして設定します。 必須。

2

validate

入力フィールドに検証スタイルを追加します。

3

active

アクティブなスタイルの入力を表示します。

4

materialize-textarea

テキスト領域のスタイル設定に使用されます。 テキスト領域は、内部のテキストに自動的にサイズ変更されます。

5

filled-in

塗りつぶされたボックススタイルのチェックボックスを表示します。

例

次の例では、入力クラスを使用してサンプルフォームを紹介します。

materialize_forms

<html>
   <head>
      <title>The Materialize Form Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <div class = "row">
         <form class = "col s12">
            <div class = "row">
               <div class = "input-field col s6">
                  <i class = "material-icons prefix">account_circle</i>
                  <input placeholder = "Username" value = "Mahesh" id = "name"
                     type = "text" class = "active validate" required/>
                  <label for = "name">Username</label>
               </div>

               <div class = "input-field col s6">
                  <label for = "password">Password</label>
                  <input id = "password" type = "password" placeholder = "Password"
                     class = "validate" required/>
               </div>
            </div>

            <div class = "row">
               <div class = "input-field col s12">
                  <input placeholder = "Email" id = "email" type = "email"
                     class = "validate">
                  <label for = "email">Email</label>
               </div>
            </div>

            <div class = "row">
               <div class = "input-field col s12">
                  <i class = "material-icons prefix">mode_edit</i>
                  <textarea id = "address" class = "materialize-textarea"></textarea>
                  <label for = "address">Address</label>
               </div>
            </div>

            <div class = "row">
               <div class = "input-field col s12">
                  <input placeholder = "Comments (Disabled)" id = "comments"
                     type = "text" disabled/>
                  <label for = "comments">Comments</label>
               </div>
            </div>

            <div class = "row">
               <div class = "input-field col s12">
                  <p>
                     <input id = "married" type = "checkbox" checked = "checked"/>
                     <label for = "married">Married</label>
                  </p>

                  <p>
                     <input id = "single" type = "checkbox" class = "filled-in"/>
                     <label for = "single">Single</label>
                  </p>

                  <p>
                     <input id = "dontknow" type = "checkbox" disabled = "disabled"/>
                     <label for = "dontknow">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>

            <div class = "row">
               <div class = "input-field col s12">
                   <p>
                     <input id = "male" type = "radio" name = "gender"
                        value = "male" checked/>
                     <label for = "male">Male</label>
                  </p>

                  <p>
                     <input id = "female" type = "radio" name = "gender"
                        value = "female" checked/>
                     <label for = "female">Female</label>
                  </p>

                  <p>
                     <input id = "dontknow1" type = "radio" name = "gender"
                        value = "female" disabled/>
                     <label for = "dontknow1">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

結果

結果を確認します。

重要な入力コントロール

Materializeは、さまざまなタイプの入力コントロールにCSSを提供します。 次の表は同じ詳細です。

Sr.No. Input Type Name & Description
1

Select

さまざまなタイプの選択入力

2

Switches

各種スイッチ

3

File

さまざまなタイプのファイル入力

4

Range

さまざまなタイプの範囲入力

5

Date Picker

日付ピッカー

6

Character Counter

キャラクターカウンター

マテリアライズ-アイコン

マテリアライズは、次の一般的なアイコンライブラリをサポートしています-

  • フォントの素晴らしいアイコン
  • Googleマテリアルアイコン *ブートストラップアイコン

使用法

アイコンを使用するには、アイコンの名前をHTML <i>要素のクラスに入れます。 アイコンのサイズを制御するには、次のクラスを使用できます-

Sr.No. Class Name & Description
1
  • tiny*

非常に小さなサイズのアイコンを描画します。 1レム。

2

small

小さなサイズのアイコンを描画します。 2レム。

3

medium

中サイズのアイコンを描画します。 4レム。

4

large

大きなサイズのアイコンを描画します。 6レム。

例

materialize_icons

<html>
   <head>
      <title>The Materialize Icons Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet"
         href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>

   <body class = "container">
      <h2>Icons Demo</h2>
      <hr/>

      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud tiny"></i>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud small"></i>
      <i class = "fa fa-cloud medium"></i>
      <i class = "fa fa-cloud large"></i>

      <h3>Google Material Design Icon Demo</h3>
      <i class = "material-icons tiny">cloud</i>
      <i class = "material-icons small">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons medium">cloud</i>
      <i class = "material-icons large">cloud</i>

      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud tiny"></i>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "glyphicon glyphicon-cloud small"></i>
      <i class = "glyphicon glyphicon-cloud medium"></i>
      <i class = "glyphicon glyphicon-cloud large"></i>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-Navbar

マテリアライズには、簡単な方法で素敵なナビゲーションバーを作成するためのさまざまなCSSクラスが用意されています。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

nav-wrapper

navコンポーネントをnavバー/ブレッドクラムラッパーとして設定します。

2

brand-logo

アンカー要素をメインロゴとして設定します。

3

nav-mobile

ul要素をナビゲーションバーとして設定します。

例

次の例では、navbarクラスを使用してさまざまなナビゲーションバーを紹介します。

ナビゲーションバーを具体化する

<html>
   <head>
      <title>The Materialize NavBar Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>

      <script>
         $( document ).ready(function()) {
            $(".dropdown-button").dropdown();
         });
      </script>
   </head>

   <body class = "container">
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12" >
            <h5>Right Aligned Nav Bar</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo">finddevguides</a>
                  <ul id = "nav-mobile" class = "right hide-on-med-and-down">
                     <li><a href = "#">HTML5</a></li>
                     <li><a href = "#">CSS</a></li>
                     <li><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>

      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Left Aligned Nav Bar</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo right">finddevguides</a>
                  <ul id = "nav-mobile" class = "left hide-on-med-and-down">
                     <li><a href = "#">HTML5</a></li>
                     <li><a href = "#">CSS</a></li>
                     <li><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>

      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Center Aligned Nav Bar</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo center">finddevguides</a>
                  <ul id = "nav-mobile" class = "right hide-on-med-and-down">
                     <li><a href = "#">Java</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>

      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Nav Bar with Active link</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo right">finddevguides</a>
                  <ul id = "nav-mobile" class = "left hide-on-med-and-down">
                     <li><a href = "#">HTML5</a></li>
                     <li><a href = "#">CSS</a></li>
                     <li class = "active"><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>

      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Nav Bar with dropdown menu</h5>
            <ul id = "javaDropDown" class = "dropdown-content">
               <li><a href = "#!">JSF</a></li>
               <li><a href = "#!">JSP</a></li>
               <li class = "divider"></li>
               <li><a href = "#!">Servlets</a></li>
            </ul>

            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo center">finddevguides</a>
                  <ul id = "nav-mobile" class = "right hide-on-med-and-down">
                     <!-- Dropdown Trigger -->
                     <li><a class = "dropdown-button" href = "#!"
                        data-activates = "javaDropDown">Java<i class = "material-icons
                        right">arrow_drop_down</i></a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>

      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12">
            <h5>Nav Bar with Links and Icons</h5>
            <nav>
               <div class = "nav-wrapper">
                  <a href = "#" class = "brand-logo right">finddevguides</a>
                  <ul id = "nav-mobile" class = "left hide-on-med-and-down">
                     <li><a href = "#"><i class = "material-icons left">search</i>
                        HTML5</a></li>
                     <li><a href = "#"><i class = "material-icons right">view_module</i>
                        CSS</a></li>
                     <li><a href = "#">JavaScript</a></li>
                  </ul>
               </div>
            </nav>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-ページネーション

Materializeは、簡単な方法で素敵なページネーションバーを作成するためのさまざまなCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

pagination

ul要素をページネーションコンポーネントとして設定します。

例

次の例は、navbarクラスを使用してページネーションバーを紹介する方法を示しています。

materialize_pagination

<html>
   <head>
      <title>The Materialize Pagination Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <div class = "row" style = "width:560px;">
         <div class = "col s12 m12 l12" >
            <h5>Materialize Pagination</h5>
            <ul class = "pagination">
               <li class = "disabled"><a href = "#!">
                  <i class = "material-icons">chevron_left</i></a></li>
               <li class = "active"><a href = "#!">1</a></li>
               <li class = "waves-effect"><a href = "#!">2</a></li>
               <li class = "waves-effect"><a href = "#!">3</a></li>
               <li class = "waves-effect"><a href = "#!">4</a></li>
               <li class = "waves-effect"><a href = "#!">5</a></li>
               <li class = "waves-effect"><a href = "#!">
                  <i class = "material-icons">chevron_right</i></a></li>
            </ul>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-プリローダー

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

Sr.No. Class Name & Description
1

progress

要素を進捗コンポーネントとして識別します。 div要素に必要です。

2

determinate

基本的なマテリアライズ動作を進行状況インジケーターに設定します。

3

indeterminate

アニメーションを進行状況インジケーターに設定します。

例

以下は、さまざまな方法でプリローダーを使用する例です。

プリローダーを具体化する

<html>
   <head>
      <title>The Materialize Preloader Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <h4>Default Preloader</h4>
      <div class = "progress">
         <div class = "determinate" style = "width: 50%"></div>
      </div>

      <h4>Indeterminate Preloader</h4>
      <div class = "progress">
         <div class = "indeterminate"></div>
      </div>

      <h4>Circular Preloader</h4>
      <div class = "preloader-wrapper big active">
         <div class = "spinner-layer spinner-blue-only">
            <div class = "circle-clipper left">
               <div class = "circle"></div>
            </div>

            <div class = "gap-patch">
               <div class = "circle"></div>
            </div>

            <div class = "circle-clipper right">
               <div class = "circle"></div>
            </div>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-折りたたみ可能

マテリアライズには、さまざまな種類のアコーディオンを表示するためのさまざまな事前定義の視覚的および動作強化を適用するさまざまなCSSクラスが用意されています。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

collapsible

要素をマテリアライズ折りたたみコンポーネントとして識別します。 ul要素に必要です。

2

collapsible-header

divをセクションヘッダーとして設定します。

3

collapsible-body

divをセクションコンテンツコンテナーとして設定します。

4

popout

折りたたみ可能なポップアウトを作成します。

5

active

セクションを開きます。

6

expandable

折りたたみ可能なコンポーネントを拡張可能としてマークします。

7

accordion

折りたたみ可能なコンポーネントをアコーディオンとしてマークします。

以下は、さまざまな方法でアコーディオンを使用する例です。

例

折りたたみ可能な

<html>
   <head>
      <title>The Materialize Collapsible Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <h4>Simple Accordion</h4>
      <ul class = "collapsible" data-collapsible = "accordion">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>

         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>

         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>

      <h4>Popout Accordion</h4>
      <ul class = "collapsible popout" data-collapsible = "accordion">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>

         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>

         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>

      <h4>Accordion with Preselected Section</h4>
      <ul class = "collapsible" data-collapsible = "accordion">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>

         <li>
            <div class = "collapsible-header active">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>

         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>

      <h4>Expandables</h4>
      <ul class = "collapsible" data-collapsible = "expandable">
         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">filter_drama</i>First Section</div>
            <div class = "collapsible-body"><p>This is first section.</p></div>
         </li>

         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">place</i>Second Section</div>
            <div class = "collapsible-body"><p>This is second section.</p></div>
         </li>

         <li>
            <div class = "collapsible-header">
               <i class = "material-icons">whatshot</i>Third Section</div>
            <div class = "collapsible-body"><p>This is third section.</p></div>
         </li>
      </ul>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-ダイアログ

マテリアライズには、控えめなアラートをユーザーに表示するためのさまざまな特別な方法が用意されています。 マテリアライズは、彼らに乾杯という言葉を提供します。 以下は、ダイアログをトーストとして表示する構文です。 

Materialize.toast(message, displayLength, className, completeCallback);

どこで、

  • message -ユーザーに表示されるメッセージ。
  • displayLength -メッセージが消えるまでの期間。
  • className -トーストに適用されるスタイルクラス。 たとえば、「丸め」。
  • completeCallback -トーストが終了すると呼び出されるコールバックメソッド。

ツールチップ用に、Materializeは次のCSSクラスを提供します。

Sr.No. Class Name & Description
1

tooltipped

ツールチップを持つコンポーネントを識別します。

2

data-position

ツールチップの位置。下、上、左、または右。

3

data-delay

ツールチップが消えるまでの時間を設定します。

4

data-tooltip

ツールチップの内容を設定します。

例

次の例は、トーストとツールチップの使用方法を示しています。

materialize_dialogs

<html>
   <head>
      <title>The Materialize Dialogs Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>

      <script>
         function showToast(message, duration) {
            Materialize.toast(message, duration);
         }

         function showToast1(message, duration) {
            Materialize.toast('<i>'+ message + '</i>', duration);
         }

         function showToast2(message, duration) {
            Materialize.toast(message, duration, 'rounded');
         }

         function showToast3(message, duration) {
            Materialize.toast('Hello World!', duration, '', function toastCompleted() {
               alert('Toast dismissed!');
            });
         }
      </script>
   </head>

   <body class = "container">
      <h4>Toasts</h4>
      <a class = "btn" onclick = "showToast('Hello World!', 3000)">Normal Alert!</a>
      <a class = "btn" onclick = "showToast1('Hello World!', 3000)">Italic Alert!</a>
      <a class = "btn" onclick = "showToast2('Hello World!', 3000)">Rounded Alert!</a>
      <br/><br/>
      <a class = "btn" onclick = "showToast3('Hello World!', 3000)">Callback Alert!</a>

      <h4>Tooltips</h4>
      <a class = "btn tooltipped" data-position = "bottom" data-delay = "50"
         data-tooltip = "I am in bottom!">Bottom</a>
      <a class = "btn tooltipped" data-position = "left" data-delay = "50"
         data-tooltip = "I am in left!">Left</a>
      <a class = "btn tooltipped" data-position = "right" data-delay = "50"
         data-tooltip = "I am in right!">Right</a>
      <a class = "btn tooltipped" data-position = "top" data-delay = "50"
         data-tooltip = "I am in top!">Top</a>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-ドロップダウン

Materializeは、ドロップダウンとしてul要素を作成し、ul要素のidをボタンまたはアンカー要素のdata-activates属性に追加するためのドロップダウンCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

dropdown-content

ulをマテリアライズドロップダウンコンポーネントとして識別します。 ul要素に必要です。

2

data-activates

ドロップダウンul要素のid。

例

以下は、ドロップダウンの使用例です。

materialize_dropdowns

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Dropdowns Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <h3>Drop Down Demo</h3>
      <ul id = "dropdown" class = "dropdown-content">
         <li><a href = "#">Inbox<span class = "badge">12</span></a></li>
         <li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
         <li><a href = "#">Sent</a></li>
         <li class = "divider"></li>
         <li><a href = "#">Outbox<span class = "badge">14</span></a></li>
      </ul>

      <a class = "btn dropdown-button" href = "#" data-activates = "dropdown">Mail Box
         <i class = "mdi-navigation-arrow-drop-down right"></i></a>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-タブ

Materializeは、タブとして ul 要素を作成するためのタブCSSクラスを提供します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

tabs

ulをマテリアライズタブコンポーネントとして識別します。 ul要素に必要です。

2

active

タブをアクティブにします。

例

以下は、タブの使用例です。

materialize_tabs

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Tabs Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <h3>Tabs Demo</h3>
      <div class = "row">
         <div class = "col s12">
            <ul class = "tabs">
               <li class = "tab col s3"><a href = "#inbox">Inbox</a></li>
               <li class = "tab col s3"><a class = "active" href = "#unread">
                  Unread</a></li>
               <li class = "tab col s3 disabled"><a href = "#outbox">
                  Outbox (Disabled)</a></li>
               <li class = "tab col s3"><a href = "#sent">Sent</a></li>
            </ul>
         </div>

         <div id = "inbox" class = "col s12">Inbox</div>
         <div id = "unread" class = "col s12">Unread</div>
         <div id = "outbox" class = "col s12">Outbox (Disabled)</div>
         <div id = "sent" class = "col s12">Sent</div>
      </div>
   </body>
</html>

結果

結果を確認します。

マテリアライズ-波

Materializeは、外部ライブラリであるWavesを使用して、Material Designで概説されているインク効果を作成します。 次の表に、使用可能なクラスとその効果を示します。

Sr.No. Class Name & Description
1

waves-effect

コントロールに波の効果を適用します。

2

waves-light

白い波の効果を適用します。

3

waves-red

赤い色の波の効果を適用します。

4

waves-green

緑色の波の効果を適用します。

5

waves-yellow

黄色の波の効果を適用します。

6

waves-orange

オレンジ色の波の効果を適用します。

7

waves-purple

紫色の波の効果を適用します。

8

waves-teal

青緑色の波の効果を適用します。

例

以下は、ボタンに波効果を使用する例です。

materialize_waves

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Waves Effects Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script>
   </head>

   <body class = "container">
      <h3>Waves Effects Demo</h3>
      <div class = "collection waves-color-demo">
         <div class = "collection-item">
            <code class = " language-markup">Default</code>
            <a href = "#!" class = "waves-effect btn secondary-content">
               Click Me!</a>
         </div>

         <div class = "collection-item">
            <code class = " language-markup">waves-light</code>
            <a href = "#!" class = "waves-effect waves-light btn secondary-content">
               Click Me!</a>
         </div>

         <div class = "collection-item">
            <code class = " language-markup">waves-red</code>
            <a href = "#!" class = "waves-effect waves-red btn secondary-content">
               Click Me!</a>
         </div>

         <div class = "collection-item">
            <code class = " language-markup">waves-yellow</code>
            <a href = "#!" class = "waves-effect waves-yellow btn secondary-content">
               Click Me!</a>
         </div>

         <div class = "collection-item">
            <code class = " language-markup">waves-orange</code>
            <a href = "#!" class = "waves-effect waves-orange btn secondary-content">
               Click Me!</a>
         </div>

         <div class = "collection-item">
            <code class = " language-markup">waves-purple</code>
            <a href = "#!" class = "waves-effect waves-purple btn secondary-content">
               Click Me!</a>
         </div>

         <div class = "collection-item">
            <code class = " language-markup">waves-green</code>
            <a href = "#!" class = "waves-effect waves-green btn secondary-content">
               Click Me!</a>
         </div>

         <div class = "collection-item">
            <code class = " language-markup">waves-teal</code>
            <a href = "#!" class = "waves-effect waves-teal btn secondary-content">
               Click Me!</a>
         </div>
      </div>
   </body>
</html>

結果

結果を確認します。

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