Material Design Lite - Layouts

In diesem Kapitel werden die verschiedenen Layouts in Material Design Lite erläutert. HTML5 enthält die folgenden Containerelemente:

  • <div> - Stellt einen generischen Container für HTML-Inhalte bereit.

  • <header> - Repräsentiert den Header-Abschnitt.

  • <footer> - Repräsentiert den Fußzeilenabschnitt.

  • <article> - Repräsentiert Artikel.

  • <section> - Bietet einen generischen Container für verschiedene Arten von Abschnitten.

MDL bietet verschiedene CSS-Klassen, um verschiedene vordefinierte visuelle und Verhaltensverbesserungen auf die Container anzuwenden. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-layout

Identifiziert einen Container als MDL-Komponente. Erforderlich am äußeren Behälterelement.
2

mdl-js-layout

Fügt dem Layout grundlegendes MDL-Verhalten hinzu. Erforderlich am äußeren Behälterelement.
3

mdl-layout__header

Identifiziert den Container als MDL-Komponente. Erforderlich für Header-Element.
4

mdl-layout-icon

Wird verwendet, um ein Anwendungssymbol hinzuzufügen. Wird vom Menüsymbol überschrieben, wenn beide sichtbar sind. Optionales Symbolelement.
5

mdl-layout__header-row

Identifiziert den Container als MDL-Headerzeile. Erforderlich für den Header-Inhaltscontainer.
6

mdl-layout__title

Identifiziert den Layouttiteltext. Erforderlich für Layout-Titelcontainer.
7

mdl-layout-spacer

Dient zum Ausrichten von Elementen in einer Kopfzeile oder Schublade. Es wächst, um den verbleibenden Raum zu füllen. Wird häufig zum Ausrichten von Elementen nach rechts verwendet. Optional bei div nach Layout-Titel.
8

mdl-navigation

Identifiziert den Container als MDL-Navigationsgruppe. Erforderlich für das Navigationselement.
9

mdl-navigation__link

Identifiziert den Anker als MDL-Navigationslink. Erforderlich für Kopf- und / oder Schubladenankerelemente.
10

mdl-layout__drawer

Identifiziert den Container als MDL-Layout-Schublade. Erforderlich für Schubladenbehälterelement.
11

mdl-layout__content

Identifiziert den Container als MDL-Layoutinhalt. Erforderlich für Hauptelement.
12

mdl-layout__header--scroll

Lässt die Kopfzeile mit dem Inhalt scrollen. Optional für Header-Element.
13

mdl-layout--fixed-drawer

Macht die Schublade immer sichtbar und öffnet sich in größeren Bildschirmen. Optional am äußeren Behälterelement und nicht am Schubladenbehälterelement.
14

mdl-layout--fixed-header

Macht den Header auch in kleinen Bildschirmen immer sichtbar. Optional am äußeren Behälterelement.
15

mdl-layout--large-screen-only

Blendet ein Element auf kleineren Bildschirmen aus. Optional für alle Nachkommen von mdl-layout.
16

mdl-layout--small-screen-only

Blendet ein Element auf größeren Bildschirmen aus. Optional für alle Nachkommen von mdl-layout.
17

mdl-layout__header--waterfall

Ermöglicht einen "Wasserfall" -Effekt mit mehreren Kopfzeilen. Optional für Header-Element.
18

mdl-layout__header--transparent

Macht den Header transparent und zeichnet auf den Layouthintergrund. Optional für Header-Element.
19

mdl-layout__header--seamed

Verwendet einen Header ohne Schatten. Optional für Header-Element.
20

mdl-layout__tab-bar

Identifiziert den Container als MDL-Registerkartenleiste. Erforderlich für das Containerelement in der Kopfzeile (Layout mit Registerkarten).
21

mdl-layout__tab

Identifiziert den Anker als MDL-Tab-Link. Erforderlich für Ankerelemente in der Registerkartenleiste.
22

is-active

Identifiziert die Registerkarte als standardmäßige aktive Registerkarte. Optional für das Ankerelement der Registerkartenleiste und das zugehörige Element des Registerkartenabschnitts.
23

mdl-layout__tab-panel

Identifiziert den Container als Registerkarteninhaltsbereich. Erforderlich für Registerkartenelemente.
24

mdl-layout--fixed-tabs

Verwendet feste Registerkarten anstelle der standardmäßigen scrollbaren Registerkarten. Optional für das äußere Containerelement, nicht für den Container im Header.

Die folgenden Beispiele zeigen die Verwendung der mdl-layout-Klasse zum Gestalten verschiedener Container.

Feste Schublade

Um eine Vorlage mit fester Schublade, aber ohne Kopfzeile zu erstellen, werden die folgenden MDL-Klassen verwendet.

  • mdl-layout - Identifiziert ein div als MDL-Komponente.

  • mdl-js-layout - Fügt dem äußeren Div ein grundlegendes MDL-Verhalten hinzu.

  • mdl-layout--fixed-drawer - Macht die Schublade in größeren Bildschirmen immer sichtbar und offen.

  • mdl-layout__drawer - Identifiziert div als MDL-Layout-Schublade.

  • mdl-layout-title - Identifiziert den Layouttiteltext.

  • mdl-navigation - Identifiziert div als MDL-Navigationsgruppe.

  • mdl-navigation__link - Identifiziert den Anker als MDL-Navigationslink.

  • mdl-layout__content - Identifiziert div als MDL-Layoutinhalt.

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>

Ergebnis

Überprüfen Sie das Ergebnis.

Header behoben

Zum Erstellen einer Vorlage mit festem Header wird die folgende zusätzliche MDL-Klasse verwendet.

  • mdl-layout--fixed-header - Macht den Header auch in kleinen Bildschirmen immer sichtbar.

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>

Ergebnis

Überprüfen Sie das Ergebnis.

Header und Schublade behoben

Um eine Vorlage mit festem Header und fester Schublade zu erstellen, werden folgende zusätzliche MDL-Klassen verwendet.

  • mdl-layout--fixed-drawer - Macht die Schublade in größeren Bildschirmen immer sichtbar und offen.

  • mdl-layout--fixed-header - Macht den Header auch in kleinen Bildschirmen immer sichtbar.

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>

Ergebnis

Überprüfen Sie das Ergebnis.

Scrollender Header

Zum Erstellen einer Vorlage mit Bildlaufkopf werden die folgenden MDL-Klassen verwendet.

  • mdl-layout--header--scroll - Lässt die Kopfzeile mit dem Inhalt scrollen.

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>

Ergebnis

Überprüfen Sie das Ergebnis.

Vertragskopf

Um eine Vorlage mit einem Header zu erstellen, der sich beim Scrollen der Seite zusammenzieht, wird die folgende MDL-Klasse verwendet.

  • mdl-layout__header--waterfall - Ermöglicht einen "Wasserfall" -Effekt mit mehreren Kopfzeilen.

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>

Ergebnis

Überprüfen Sie das Ergebnis.

Feste Kopfzeile mit scrollbaren Registerkarten

Um eine Vorlage mit einer Kopfzeile mit scrollbaren Registerkarten zu erstellen, werden die folgenden MDL-Klassen verwendet.

  • mdl-layout__tab-bar - Identifiziert den Container als MDL-Registerkartenleiste.

  • mdl-layout__tab - Identifiziert den Anker als MDL-Tab-Link.

  • mdl-layout__tab-panel - Identifiziert den Container als Registerkarten-Inhaltsbereich.

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>

Ergebnis

Überprüfen Sie das Ergebnis.

Feste Kopfzeile mit festen Registerkarten

Um eine Vorlage mit einem Header mit festen Registerkarten zu erstellen, wird die folgende zusätzliche MDL-Klasse verwendet.

  • mdl-layout--fixed-tabs - Verwendet feste Registerkarten anstelle der standardmäßigen scrollbaren Registerkarten.

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>

Ergebnis

Überprüfen Sie das Ergebnis.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved