Materialdesignlite-layouts

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

Material Design Lite-レイアウト

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

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

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

Sr.No. Class Name & Description
1

mdl-layout

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

2

mdl-js-layout

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

3

mdl-layout__header

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

4

mdl-layout-icon

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

5

mdl-layout__header-row

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

6

mdl-layout__title

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

7

mdl-layout-spacer

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

8

mdl-navigation

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

9

mdl-navigation__link

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

10

mdl-layout__drawer

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

11

mdl-layout__content

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

12

mdl-layout__header—​scroll

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

13

mdl-layout—​fixed-drawer

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

14

mdl-layout—​fixed-header

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

15

mdl-layout—​large-screen-only

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

16

mdl-layout—​small-screen-only

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

17

mdl-layout__header—​waterfall

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

18

mdl-layout__header—​transparent

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

19

mdl-layout__header—​seamed

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

20

mdl-layout__tab-bar

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

21

mdl-layout__tab

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

22

is-active

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

23

mdl-layout__tab-panel

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

24

mdl-layout—​fixed-tabs

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

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

固定引き出し

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

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

mdl_fixeddrawer

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

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

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

   </body>
</html>

結果

結果を確認します。

固定ヘッダー

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

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

mdl_fixedheader

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

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

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

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

   </body>
</html>

結果

結果を確認します。

固定ヘッダーと引き出し

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

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

mdl_fixedheader

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

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

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

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

   </body>
</html>

結果

結果を確認します。

スクロールヘッダー

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

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

mdl_scrollingheader

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

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

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

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

   </body>
</html>

結果

結果を確認します。

契約ヘッダー

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

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

mdl_waterfallheader

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

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

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

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

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

   </body>
</html>

結果

結果を確認します。

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

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

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

mdl_scrollabletabheader

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

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

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

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

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

   </body>
</html>

結果

結果を確認します。

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

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

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

mdl_fixedtabheader

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

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

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

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

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

   </body>
</html>

結果

結果を確認します。

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