Material Design Lite - Kurzanleitung

Was ist Material Design Lite?

Material Design Lite (MDL ist eine UI-Komponentenbibliothek, die mit CSS, JavaScript und HTML erstellt wurde. Die MDL-UI-Komponenten helfen beim Erstellen attraktiver, konsistenter und funktionaler Webseiten und Web-Apps, während moderne Webdesign-Prinzipien wie Browser-Portabilität und Geräteunabhängigkeit eingehalten werden und anmutige Erniedrigung.

Im Folgenden sind die wichtigsten Merkmale von Material Design Lite aufgeführt:

  • Eingebautes Responsive Design.

  • Standard-CSS mit minimalem Platzbedarf.

  • Enthält neue Versionen gängiger Steuerelemente für Benutzeroberflächen wie Schaltflächen, Kontrollkästchen und Textfelder, die an die Materialdesign-Konzepte angepasst sind.

  • Enthält erweiterte und spezielle Funktionen wie Karten, Spaltenlayouts, Schieberegler, Drehfelder, Registerkarten, Typografie usw.

  • Kann mit oder ohne Bibliothek oder Entwicklungsumgebung verwendet werden.

  • Browserübergreifend und kann zum Erstellen wiederverwendbarer Webkomponenten verwendet werden.

Sich anpassendes Design

  • Material Design Lite verfügt über ein integriertes Responsive Design, sodass sich die mit Material Design Lite erstellte Website entsprechend der Gerätegröße neu gestaltet.

  • Material Design Lite-Klassen werden so erstellt, dass die Website für jede Bildschirmgröße geeignet ist.

  • Die mit Material Design Lite erstellten Websites sind vollständig kompatibel mit PCs, Tablets und Mobilgeräten.

Standard CSS

  • Material Design Lite verwendet nur Standard-CSS und ist sehr einfach zu erlernen.

  • Es besteht keine Abhängigkeit von einer externen JavaScript-Bibliothek wie jQuery.

  • ExtensibleMaterial Design Lite ist von Natur aus sehr minimal und flach.

  • Es wurde unter Berücksichtigung der Tatsache entwickelt, dass es viel einfacher ist, neue CSS-Regeln hinzuzufügen, als vorhandene CSS-Regeln zu überschreiben.

  • Es unterstützt Schatten und kräftige Farben.

  • Die Farben und Schattierungen bleiben über verschiedene Plattformen und Geräte hinweg einheitlich.

Und vor allem ist MDL absolut kostenlos.

Es gibt zwei Möglichkeiten, Material Design Lite zu verwenden:

  • Local Installation - Sie können die Dateien .primär} - {Akzent} .min.css und material.min.js auf Ihren lokalen Computer herunterladen und in Ihren HTML-Code aufnehmen.

  • CDN Based Version - Sie können die Dateien material. {Primary} - {akzent} .min.css und material.min.js direkt aus dem Content Delivery Network (CDN) in Ihren HTML-Code aufnehmen.

Lokale Installation

Befolgen Sie diese Schritte für die Installation von MDL -

  • Gehe zu https://www.getmdl.io/started/index.html um die neueste verfügbare Version herunterzuladen.

  • Dann legen Sie die heruntergeladene material.min.js Datei in einem Verzeichnis Ihrer Website, zB / js und material.min.css in / css.

Beispiel

Jetzt können Sie die CSS- und JS- Datei wie folgt in Ihre HTML-Datei aufnehmen:

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "material.min.css">
      <script src = "material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Das obige Programm generiert das folgende Ergebnis:

CDN-basierte Version

Sie können die js- und css-Dateien direkt aus dem Content Delivery Network (CDN) in Ihren HTML-Code aufnehmen. storage.googleapis.com bietet Inhalte für die neueste Version.

In diesem Tutorial verwenden wir die CDN-Version von storage.googleapis.com der Bibliothek.

Beispiel

Lassen Sie uns nun das obige Beispiel mit material.css und material.js aus dem Google CDN neu schreiben.

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

Das obige Programm generiert das folgende Ergebnis:

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 für 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 am Kopfelement.

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 am Kopfelement.

18

mdl-layout__header--transparent

Macht den Header transparent und zeichnet auf den Layouthintergrund. Optional am Kopfelement.

19

mdl-layout__header--seamed

Verwendet einen Header ohne Schatten. Optional am Kopfelement.

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 Layout-Titeltext.

  • 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 festem Fach 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.

Das Material Design Lite (MDL) -Raster ist eine Komponente zum Anlegen von Inhalten für unterschiedliche Bildschirmgrößen. Das MDL-Raster wird von einem Container / Div-Element definiert und eingeschlossen. Ein Raster enthält 12 Spalten im Bildschirm für die Desktopgröße, 8 im Bildschirm für die Tablet-Größe und 4 Spalten im Bildschirm für die Telefongröße, wobei jede Größe vordefinierte Ränder und Rinnen aufweist. Die Zellen werden nacheinander in der angegebenen Reihenfolge in einer Reihenfolge angeordnet, mit folgenden Ausnahmen:

  • Wenn eine Rasterzelle in einer der Bildschirmgrößen nicht für die Zeile geeignet ist, fließt sie in die folgende Zeile.

  • Wenn eine Rasterzelle eine angegebene Spaltengröße hat, die gleich oder größer als die Anzahl der Spalten für die Bildschirmgröße ist, nimmt sie die gesamte Zeile ein.

MDL bietet verschiedene CSS-Klassen, um verschiedene vordefinierte visuelle und Verhaltensverbesserungen auf das Raster 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-grid

Identifiziert einen Container als MDL-Grid-Komponente. Erforderlich für "äußeres" div-Element.

3

mdl-cell

Identifiziert einen Container als MDL-Zelle. Erforderlich für "innere" div-Elemente.

4

mdl-grid--no-spacing

Aktualisiert die Rasterzellen so, dass kein Abstand zwischen ihnen besteht. Optional für Gittercontainer.

5

mdl-cell--N-col

Dies hilft dabei, die Spaltengröße für die Zelle auf N zu setzen, N ist 1-12 einschließlich, standardmäßig 4; optional für "innere" div-Elemente.

6

mdl-cell--N-col-desktop

Dies hilft, die Spaltengröße für die Zelle nur im Desktop-Modus auf N zu setzen. N ist 1-12 einschließlich; optional für "innere" div-Elemente.

7

mdl-cell--N-col-tablet

Dies hilft, die Spaltengröße für die Zelle nur im Tablettenmodus auf N zu setzen. N ist 1-8 einschließlich; optional für "innere" div-Elemente.

8

mdl-cell--N-col-phone

Dies hilft, die Spaltengröße für die Zelle nur im Telefonmodus auf N zu setzen. N ist 1-4 einschließlich; optional für "innere" div-Elemente.

9

mdl-cell--hide-desktop

Blendet die Zelle im Desktop-Modus aus. Optional für "innere" div-Elemente.

10

mdl-cell--hide-tablet

Blendet die Zelle im Tablet-Modus aus. Optional für "innere" div-Elemente.

11

mdl-cell--hide-phone

Blendet die Zelle im Telefonmodus aus. Optional für "innere" div-Elemente.

12

mdl-cell--stretch

Streckt die Zelle vertikal, um das übergeordnete Element standardmäßig zu füllen. optional für "innere" div-Elemente.

13

mdl-cell--top

Richtet die Zelle am oberen Rand des übergeordneten Elements aus. Optional für "innere" div-Elemente.

14

mdl-cell--middle

Richtet die Zelle an der Mitte des übergeordneten Elements aus. Optional für "innere" div-Elemente.

15

mdl-cell--bottom

Richtet die Zelle am unteren Rand des übergeordneten Elements aus. Optional für "innere" div-Elemente.

Beispiel

Das folgende Beispiel hilft Ihnen dabei, die Verwendung der mdl-grid-Klasse zum Layouten von Inhalten auf verschiedenen Bildschirmen zu verstehen.

In diesem Beispiel werden die unten angegebenen 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-header - Macht den Header auch in kleinen Bildschirmen immer sichtbar.

  • mdl-layout__header-row - Identifiziert den Container als MDL-Headerzeile.

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

  • mdl-layout-title - Identifiziert den Layout-Titeltext.

  • 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-grid - Identifiziert div als MDL-Grid-Komponente.

  • mdl-cell - Identifiziert div als MDL-Zelle.

  • mdl-cell--1-col - Legt die Spaltengröße für die Zelle auf die von 1 Zelle von 12 Zellen in der Desktop-Bildschirmgröße fest.

  • mdl-cell--2-col - Legt die Spaltengröße für die Zelle auf die von 2 Zellen von 12 Zellen in der Desktop-Bildschirmgröße fest.

  • mdl-cell--4-col - Legt die Spaltengröße für die Zelle auf die von 4 Zellen von 12 Zellen in der Desktop-Bildschirmgröße fest.

  • mdl-cell--6-col - Legt die Spaltengröße für die Zelle auf 6 von 12 Zellen in der Desktop-Bildschirmgröße fest.

  • mdl-cell--4-col-phone - Legt die Spaltengröße für die Zelle auf 4 von 4 Zellen in der Bildschirmgröße des Telefons fest.

  • mdl-cell--6-col-tablet - Legt die Spaltengröße für die Zelle auf die von 6 Zellen von 8 Zellen in der Bildschirmgröße des Tablets fest.

  • mdl-cell--8-col-tablet - Legt die Spaltengröße für die Zelle auf die von 8 Zellen von 8 Zellen in der Bildschirmgröße des Tablets fest.

mdl_grid.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style> 
         .graybox {
            background-color:#ddd;
         }
      </style>
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Grid</span>          
            </div>       
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design Tutorial</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">About</a>  
            </nav>
         </div>
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--1-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">3</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">5</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">7</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">8</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">9</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">10</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">11</div>
               <div class = "mdl-cell mdl-cell--1-col graybox">12</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--4-col graybox">1</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">2</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">3</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col graybox">6</div>
               <div class = "mdl-cell mdl-cell--4-col graybox">4</div>
               <div class = "mdl-cell mdl-cell--2-col graybox">2</div>
            </div>
            
            <div class = "mdl-grid">
               <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
                  6 on desktop, 8 on tablet</div>
               <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
                  4 on desktop, 6 on tablet</div>
               <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
                  2 on desktop, 4 on phone</div>
            </div>
         </main>
      </div>
   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

Die Registerkarte "Material Design Lite" (MDL) ist eine Komponente der Benutzeroberfläche, mit der mehrere Bildschirme auf exklusive Weise in einem einzigen Bereich angezeigt werden können.

MDL bietet verschiedene CSS-Klassen, um verschiedene vordefinierte visuelle und Verhaltensverbesserungen auf die Registerkarten anzuwenden. In der folgenden Tabelle werden 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-tabs

Identifiziert einen Registerkartencontainer als MDL-Komponente. Erforderlich für "äußeres" div-Element.

3

mdl-js-tabs

Legt das grundlegende MDL-Verhalten auf Registerkartencontainer fest. Erforderlich für "äußeres" div-Element.

4

mdl-js-ripple-effect

Fügt den Tab-Links einen Ripple-Click-Effekt hinzu. Optional; geht auf "äußeres" div Element.

5

mdl-tabs__tab-bar

Identifiziert einen Container als Verknüpfungsleiste für MDL-Registerkarten. Erforderlich für das erste "innere" div-Element.

6

mdl-tabs__tab

Identifiziert einen Anker (Link) als MDL-Registerkartenaktivator. Erforderlich für alle Links im ersten "inneren" div-Element.

7

is-active

Identifiziert eine Registerkarte als Standardanzeige. Erforderlich für eines (und nur eines) der "inneren" div (tab) -Elemente.

8

mdl-tabs__panel

Identifiziert einen Container als Registerkarteninhalt. Erforderlich für jedes der "inneren" div (tab) -Elemente.

Beispiel

Das folgende Beispiel hilft Ihnen dabei, die Verwendung der mdl-tab-Klasse zum Layouten von Inhalten auf verschiedenen Registerkarten zu verstehen.

Die unten angegebenen MDL-Klassen werden in diesem Beispiel 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-header - Macht den Header auch in kleinen Bildschirmen immer sichtbar.

  • mdl-layout__header-row - Identifiziert den Container als MDL-Headerzeile.

  • mdl-layout-title - Identifiziert den Layout-Titeltext.

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

  • mdl-tabs - Identifiziert einen Tabs-Container als MDL-Komponente.

  • mdl-js-tabs - Setzt das grundlegende MDL-Verhalten auf Tabs-Container.

  • mdl-tabs__tab-bar - Identifiziert einen Container als Linkleiste für MDL-Registerkarten.

  • mdl-tabs__tab - Identifiziert einen Anker (Link) als MDL-Registerkartenaktivator.

  • is-active - Identifiziert eine Registerkarte als Standardanzeige.

  • mdl-tabs__panel - Identifiziert einen Container als Registerkarteninhalt.

mdl_tabs.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>
            
               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>  
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

Eine MDL-Fußzeilenkomponente gibt es in zwei Hauptformen: mega-footer und mini-footer. Mega-Footer enthält komplexere Inhalte als Mini-Footer. Eine Mega-Fußzeile kann mehrere Inhaltsabschnitte darstellen, die durch horizontale Regeln getrennt sind, während eine Mini-Fußzeile einen einzelnen Inhaltsabschnitt darstellt. Die Fußzeilen enthalten normalerweise sowohl informative als auch anklickbare Inhalte, z. B. Links.

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

Sr.Nr. Klassenname & Beschreibung
1

mdl-mega-footer

Identifiziert den Container als MDL-Mega-Footer-Komponente. Erforderlich für das Fußzeilenelement.

2

mdl-mega-footer__top-section

Identifiziert den Container als oberen Bereich der Fußzeile. Erforderlich für das obere Teil "äußeres" div-Element.

3

mdl-mega-footer__left-section

Identifiziert den Container als linken Abschnitt. Erforderlich für den linken Abschnitt "inneres" div-Element.

4

mdl-mega-footer__social-btn

Identifiziert ein dekoratives Quadrat innerhalb der Mega-Fußzeile. Erforderlich für das Schaltflächenelement (falls verwendet).

5

mdl-mega-footer__right-section

Identifiziert den Container als richtigen Abschnitt. Erforderlich für den rechten Abschnitt "inneres" div-Element.

6

mdl-mega-footer__middle-section

Identifiziert den Container als Fußzeilenmittelteil. Erforderlich für das "äußere" div-Element des Mittelteils.

7

mdl-mega-footer__drop-down-section

Identifiziert den Container als Dropdown-Inhaltsbereich (vertikal). Erforderlich für Dropdown-Elemente "innere" div-Elemente.

8

mdl-mega-footer__heading

Identifiziert eine Überschrift als Mega-Fußzeile. Erforderlich für das h1-Element im Dropdown-Bereich.

9

mdl-mega-footer__link-list

Identifiziert eine ungeordnete Liste als Dropdown-Liste (vertikal). Erforderlich für das ul-Element im Dropdown-Bereich.

10

mdl-mega-footer__bottom-section

Identifiziert den Container als Fußzeilenunterteil. Erforderlich für das "äußere" div-Element des unteren Abschnitts.

11

mdl-logo

Identifiziert einen Container als gestaltete Abschnittsüberschrift. Erforderlich für "inneres" div-Element im unteren Teil der Mega-Fußzeile oder im linken Teil der Mini-Fußzeile.

12

mdl-mini-footer

Identifiziert den Container als MDL-Mini-Footer-Komponente. Erforderlich für das Fußzeilenelement.

13

mdl-mini-footer__left-section

Identifiziert den Container als linken Abschnitt. Erforderlich für den linken Abschnitt "inneres" div-Element.

14

mdl-mini-footer__link-list

Identifiziert eine ungeordnete Liste als Inline-Liste (horizontal). Erforderlich für Geschwister von ul element to div "mdl-logo".

15

mdl-mini-footer__right-section

Identifiziert den Container als richtigen Abschnitt. Erforderlich für den rechten Abschnitt "inneres" div-Element.

16

mdl-mini-footer__social-btn

Identifiziert ein dekoratives Quadrat innerhalb der Mini-Fußzeile. Erforderlich für das Schaltflächenelement (falls verwendet).

Lassen Sie uns nun einige Beispiele sehen, um die Verwendung von MDL-Fußzeilenklassen zum Stylen von Fußzeilen zu verstehen.

Mega-Fußzeile

Lassen Sie uns die Verwendung der diskutieren mdl-mega-footerKlasse zum Layouten von Inhalten in einer Fußzeile. In diesem Beispiel 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-header - Macht den Header auch in kleinen Bildschirmen immer sichtbar.

  • mdl-layout__header-row - Identifiziert den Container als MDL-Headerzeile.

  • mdl-layout-title - Identifiziert den Layout-Titeltext.

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

  • mdl-mega-footer - Identifiziert den Container als MDL-Mega-Footer-Komponente.

  • mdl-mega-footer__top-section - Identifiziert den Container als Fußzeilenoberteil.

  • mdl-mega-footer__left-section - Identifiziert den Container als linken Abschnitt.

  • mdl-mega-footer__social-btn - Identifiziert ein dekoratives Quadrat innerhalb der Mini-Fußzeile.

  • mdl-mega-footer__right-section - Identifiziert den Container als richtigen Abschnitt.

  • mdl-mega-footer__middle-section - Identifiziert den Container als Fußzeilenmittelteil.

  • mdl-mega-footer__drop-down-section - Identifiziert den Container als Dropdown-Inhaltsbereich (vertikal).

  • mdl-mega-footer__heading - Identifiziert eine Überschrift als Mega-Fußzeile.

  • mdl-mega-footer__link-list - Identifiziert eine ungeordnete Liste als Inline-Liste (horizontal).

  • mdl-mega-footer__bottom-section - Identifiziert den Container als Fußzeilenunterteil.

  • mdl-logo - Identifiziert einen Container als gestaltete Abschnittsüberschrift.

mdl_megafooter.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>
                  
                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>
               
               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>      
                     </ul>
                  </div>  
               
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>      
                     </ul>
                  </div>  	
               </div>
            
               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

Mini-Fußzeile

Das folgende Beispiel hilft Ihnen, die Verwendung von zu verstehen mdl-mini-footer Klasse zum Layouten von Inhalten in einer Fußzeile.

In diesem Beispiel werden die unten angegebenen 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-header - Macht den Header auch in kleinen Bildschirmen immer sichtbar.

  • mdl-layout__header-row - Identifiziert den Container als MDL-Headerzeile.

  • mdl-layout-title - Identifiziert den Layout-Titeltext.

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

  • mdl-mini-footer - Identifiziert den Container als MDL-Mini-Footer-Komponente.

  • mdl-mini-footer__left-section - Identifiziert den Container als linken Abschnitt.

  • mdl-logo - Identifiziert einen Container als gestaltete Abschnittsüberschrift.

  • mdl-mini-footer__link-list - Identifiziert eine ungeordnete Liste als Inline-Liste (horizontal).

  • mdl-mini-footer__right-section - Identifiziert den Container als richtigen Abschnitt.

mdl_minifooter.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mini-footer">
               <div class = "mdl-mini-footer__left-section">
                  <div class = "mdl-logo">
                     Copyright Information
                  </div>
                  <ul class = "mdl-mini-footer__link-list">
                     <li><a href = "#">Help</a></li>
                     <li><a href = "#">Privacy and Terms</a></li>
                     <li><a href = "#">User Agreement</a></li>
                  </ul>
               </div>
               
               <div class = "mdl-mini-footer__right-section">
                  <button class = "mdl-mini-footer__social-btn">1</button>
                  <button class = "mdl-mini-footer__social-btn">2</button>
                  <button class = "mdl-mini-footer__social-btn">3</button>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

Eine MDL-Ausweiskomponente ist eine Bildschirmbenachrichtigung, die eine Zahl oder ein Symbol sein kann. Es wird im Allgemeinen verwendet, um die Anzahl der Elemente hervorzuheben.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen auf die Ausweise angewendet werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-badge

Identifiziert das Element als MDL-Ausweiskomponente. Erforderlich für das Span- oder Link-Element.

2

mdl-badge--no-background

Wendet den Open-Circle-Effekt auf das Abzeichen an und ist optional.

3

mdl-badge--overlap

Überlappt das Abzeichen mit dem Container und ist optional.

4

data-badge="value"

Weist dem als Attribut verwendeten Badge einen Zeichenfolgenwert zu. erforderlich für Spannweite oder Link.

Beispiel

Das folgende Beispiel hilft Ihnen, die Verwendung von zu verstehen mdl-badge Klasse zum Hinzufügen von Benachrichtigungen zu Span- und Link-Elementen.

In diesem Beispiel werden die unten angegebenen MDL-Klassen verwendet.

  • mdl-badge - Identifiziert das Element als MDL-Ausweiskomponente.

  • data-badge- Weist dem Abzeichen einen Zeichenfolgenwert zu. Ihm können mithilfe von HTML-Symbolen Symbole zugewiesen werden.

mdl_badges.htm

<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>
   
   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>    
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>	
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen auf die Schaltflächen angewendet werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-button

Legt die Schaltfläche als MDL-Komponente fest.

2

mdl-js-button

Fügt der Schaltfläche das erforderliche grundlegende MDL-Verhalten hinzu.

3

(none)

Setzt den Flat-Display-Effekt auf die Schaltfläche (Standardeinstellung).

4

mdl-button--raised

Stellt den erhöhten Anzeigeeffekt ein. Dies schließt sich mit fab, mini-fab und icon gegenseitig aus.

5

mdl-button--fab

Legt den fabelhaften (kreisförmigen) Anzeigeeffekt fest. Dies schließt sich mit Raised, Mini-Fab und Icon gegenseitig aus.

6

mdl-button--mini-fab

Legt den Mini-Fab-Anzeigeeffekt (Small Fab Circular) fest. Dies schließt sich mit Raised, Fab und Icon gegenseitig aus.

7

mdl-button--icon

Legt den Anzeigeeffekt für Symbole (kleine, einfache, kreisförmige) fest. Dies schließt sich bei Raised, Fab und Mini-Fab gegenseitig aus.

8

mdl-button--colored

Legt den farbigen Anzeigeeffekt fest, bei dem die Farben in material.min.css definiert sind.

9

mdl-button--primary

Legt den primären Farbanzeigeeffekt fest, bei dem die Farben in material.min.css definiert sind.

10

mdl-button--accent

Legt den Akzentfarbanzeigeeffekt fest, bei dem die Farben in material.min.css definiert sind.

11

mdl-js-ripple-effect

Legt den Ripple-Click-Effekt fest und kann in Kombination mit jeder anderen Klasse verwendet werden.

Beispiel

Das folgende Beispiel hilft Ihnen, die Verwendung von zu verstehen mdl-button Klassen, um die verschiedenen Arten von Schaltflächen anzuzeigen.

mdl_buttons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table border = "0">
         <tbody>
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Colored fab (circular) display effect</td>
               <td>Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Plain fab (circular) display effect</td>
               <td>Plain fab (circular) with ripple display effect</td>
               <td>Plain fab (circular) and disabled</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Raised button</td>
               <td>Raised button with ripple display effect</td>
               <td>Raised button and disabled</td>
            </tr>
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Colored Raised button</td>
               <td>Accent-colored Raised button</td>
               <td>Accent-colored raised button with ripple effect</td>
            </tr>				
            
            <tr>
               <td><button class = "mdl-button mdl-js-button">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Flat button</td>
               <td>Flat button with ripple effect</td>
               <td>Disabled flat button</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--primary">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Primary Flat button</td>
               <td>Accent-colored Flat button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Icon button</td>
               <td>Colored Icon button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Mini Colored fab (circular) display effect</td>
               <td>Mini Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>			
         </tbody>
      </table>
   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Kartentypen angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-card

Identifiziert das div-Element als MDL-Kartencontainer, der für "äußere" div erforderlich ist.

2

mdl-card--border

Setzt einen Rand in den Kartenabschnitt, auf den er angewendet wird und der für die "inneren" Divs verwendet wird.

3

mdl-shadow--2dp through mdl-shadow--16dp

Setzt variable Schattentiefen (2, 3, 4, 6, 8 oder 16) auf Karte und ist optional, geht auf "äußere" div; Wenn nicht angegeben, wird kein Schatten angezeigt.

4

mdl-card__title

Identifiziert div als Kartentitelcontainer und ist für "innere" Titel div erforderlich.

5

mdl-card__title-text

Fügt dem Kartentitel die entsprechenden Texteigenschaften hinzu und ist auf dem Kopfetikett (H1 - H6) im Titel div erforderlich.

6

mdl-card__subtitle-text

Fügt einem Kartenuntertitel Texteigenschaften hinzu und ist optional. Es sollte ein untergeordnetes Element des Titelelements sein.

7

mdl-card__media

Identifiziert div als Kartenmediencontainer und ist für "innere" Mediendiv erforderlich.

8

mdl-card__supporting-text

Identifiziert div als Kartenkörper-Textcontainer und weist dem Körpertext die entsprechenden Texteigenschaften zu. Dies ist für "inneren" Körpertext div erforderlich. Text geht direkt in die div ohne dazwischenliegende Container.

9

mdl-card__actions

Identifiziert div als Kartenaktionscontainer und weist dem Aktionstext geeignete Texteigenschaften zu und ist für "innere" Aktionen div erforderlich. Der Inhalt wird ohne dazwischenliegende Container direkt in das Div verschoben.

Beispiel

Das folgende Beispiel hilft Ihnen dabei, die Verwendung der mdl-tooltip-Klassen zum Anzeigen verschiedener Arten von Tooltips zu verstehen.

mdl_cards.htm

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

         .image-card.mdl-card {
            width: 256px;
            height: 256px;   
            background: url('html5-mini-logo.jpg') center / cover;          
         }       
      
         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

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

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            align-items: center;
            color: #fff;
         }     
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <div class = "wide-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
               
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         
            <td>
               <div class = "square-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         </tr>
            
         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <div class = "image-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand"></div>
                  <div class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </div>
               </div>
            </td>
            
            <td>
               <div class = "event-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <div class = "mdl-layout-spacer"></div>
                     <i class = "material-icons">event</i>
                  </div>
               </div>
            </td>
         </tr>          
      </table>   
   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Arten von Fortschrittsbalken angezeigt werden können. In der folgenden Tabelle werden die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-js-progress

Setzt das grundlegende MDL-Verhalten auf Fortschrittsanzeige und ist eine erforderliche Klasse.

2

mdl-progress__indeterminate

Setzt die Animation auf Fortschrittsanzeige und ist eine optionale Klasse.

Beispiel

Das folgende Beispiel hilft Ihnen, die Verwendung von zu verstehen mdl-js-progress Klassen, um die verschiedenen Arten von Fortschrittsbalken anzuzeigen.

mdl_progressbars.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Progress bar</h4>
      <div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
      <h4>Indeterminate Progress bar</h4>
      <div id = "progressbar2" 
         class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
      <h4>Buffering Progress bar</h4>
      <div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
      
      <script language = "javascript">
         document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(44);
         });
         document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(33);
            this.MaterialProgress.setBuffer(87);
         });
      </script>
   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Arten von Spinnern angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-spinner

Identifiziert einen Container als MDL-Spinner-Komponente und ist eine erforderliche Klasse.

2

mdl-js-spinner

Setzt das grundlegende MDL-Verhalten auf Spinner und ist eine erforderliche Klasse.

3

is-active

Zeigt und animiert den Spinner und ist optional.

4

mdl-spinner--single-color

Verwendet eine einzelne Farbe anstelle von Farbänderungen und ist optional.

Beispiel

Das folgende Beispiel hilft Ihnen, die Verwendung von zu verstehen mdl-spinner Klassen und die verschiedenen Arten von Spinnern.

mdl_spinners.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Spinner</h4>
      <div class = "mdl-spinner mdl-js-spinner is-active"></div>
      <h4>Single Color Spinner</h4>
      <div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und verschiedene Menütypen angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt

Sr.Nr. Klassenname & Beschreibung
1

mdl-button

Identifiziert die Schaltfläche als MDL-Komponente und ist für das Schaltflächenelement erforderlich.

2

mdl-js-button

Setzt das grundlegende MDL-Verhalten auf button und ist für das button-Element erforderlich.

3

mdl-button--icon

Setzt das Symbol auf die Schaltfläche und ist für das Schaltflächenelement erforderlich.

4

material-icons

Identifiziert span als Material-Symbol und ist für ein Inline-Element erforderlich.

5

mdl-menu

Identifiziert einen ungeordneten Listencontainer als MDL-Komponente und ist für das ul-Element erforderlich.

6

mdl-js-menu

Setzt das grundlegende MDL-Verhalten auf Menü und ist für das ul-Element erforderlich.

7

mdl-menu__item

Identifiziert Schaltflächen als MDL-Menüoptionen und legt das grundlegende MDL-Verhalten fest, das für Listenelementelemente erforderlich ist.

8

mdl-js-ripple-effect

Legt den Ripple-Click-Effekt auf Optionslinks fest und ist optional. erforderlich für ungeordnetes Listenelement.

9

mdl-menu--top-left

Legt die Menüposition über der Schaltfläche fest, richtet den linken Rand des Menüs an der Schaltfläche aus und ist optional. erforderlich für ungeordnetes Listenelement.

10

(none)

Standardmäßig befindet sich das Menü unter der Schaltfläche und wird mit der Schaltfläche am linken Rand ausgerichtet.

11

mdl-menu--top-right

Das Menü befindet sich über der Schaltfläche, wird mit der Schaltfläche am rechten Rand ausgerichtet, optional und geht auf ein ungeordnetes Listenelement über.

12

mdl-menu--bottom-right

Das Menü befindet sich unter der Schaltfläche, wird mit der Schaltfläche am rechten Rand ausgerichtet, optional und geht auf ein ungeordnetes Listenelement über.

Beispiel

Das folgende Beispiel hilft Ihnen, die Verwendung von zu verstehen mdl-spinner Klassen, um die verschiedenen Arten von Spinnern zu zeigen.

mdl_menu.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <style>
         .container {
            position: relative;
            width: 200px;
         }

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

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

         .wrapper {
            box-sizing: border-box;
            position: absolute;
            right: 16px;
         }
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
            <td>Top Right Menu</td></tr>
         <tr>
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">    
                     <button id = "demo_menu-lower-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-lower-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-lower-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-lower-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>     
                        </ul>
                     </div>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">    
                     <button id = "demo_menu-top-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-top-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>         
               </div>
            </td>
            
            <td>     
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-top-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-top-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
               </div>
            </td>

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

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Menütypen angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-slider

Identifiziert das Eingabeelement als MDL-Komponente und ist erforderlich.

2

mdl-js-slider

Legt das grundlegende MDL-Verhalten auf das Eingabeelement fest und ist erforderlich.

Beispiel

Das folgende Beispiel hilft Ihnen dabei, die Verwendung der mdl-slider-Klassen zu verstehen, um die verschiedenen Arten von Slidern anzuzeigen.

mdl_sliders.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Slider</td><td>Slider with initial value</td>
            <td>Disabled Slider</td></tr>
         <tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range" 
            min = "0" max = "100" value = "0" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         </tr>
      </table>
      Value: <div id = "message" >25</div>
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Arten von Kontrollkästchen angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-checkbox

Identifiziert label als MDL-Komponente und ist für das label-Element erforderlich.

2

mdl-js-checkbox

Legt das grundlegende MDL-Verhalten auf label fest und ist für das label-Element erforderlich.

3

mdl-checkbox__input

Setzt das grundlegende MDL-Verhalten auf das Kontrollkästchen und ist für das Eingabeelement (Kontrollkästchen) erforderlich.

4

mdl-checkbox__label

Setzt das grundlegende MDL-Verhalten auf Beschriftung und ist für das span-Element (Beschriftung) erforderlich.

5

mdl-js-ripple-effect

Legt den Ripple-Click-Effekt fest und ist optional. geht auf das Beschriftungselement und nicht auf das Eingabeelement (Kontrollkästchen).

Beispiel

Das folgende Beispiel hilft Ihnen dabei, die Verwendung der mdl-slider-Klassen zu verstehen, um die verschiedenen Arten von Kontrollkästchen anzuzeigen.

mdl_checkboxes.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
            <td>Disabled CheckBox</td></tr>
         
         <tr>
            <td> 
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1" 
                     class = "mdl-checkbox__input" checked>
                  <span class = "mdl-checkbox__label">Married</span>
               </label>
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" 
                  for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                  <span class = "mdl-checkbox__label">Single</span>
               </label>	  
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3" 
                     class = "mdl-checkbox__input" disabled>
                  <span class = "mdl-checkbox__label">Don't know (Disabled)</span>
               </label>	   
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Arten von Optionsfeldern angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-radio

Identifiziert label als MDL-Komponente und ist für das label-Element erforderlich.

2

mdl-js-radio

Legt das grundlegende MDL-Verhalten auf label fest und ist für das label-Element erforderlich.

3

mdl-radio__button

Setzt das grundlegende MDL-Verhalten auf Radio und ist für das Eingabeelement (Optionsfeld) erforderlich.

4

mdl-radio__label

Setzt das grundlegende MDL-Verhalten auf Beschriftung und ist für das span-Element (Beschriftung) erforderlich.

5

mdl-js-ripple-effect

Legt den Ripple-Click-Effekt fest und ist optional. geht auf das Beschriftungselement und nicht auf das Eingabeelement (Optionsfeld).

Beispiel

Das folgende Beispiel hilft Ihnen dabei, die Verwendung der mdl-slider-Klassen zum Anzeigen der verschiedenen Arten von Optionsfeldern zu verstehen.

mdl_radio.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
            <td>Disabled Radio Button</td></tr>
         <tr>
            <td> 
               <label class = "mdl-radio mdl-js-radio" for = "option1">
                  <input type = "radio" id = "option1" name = "gender" 
                     class = "mdl-radio__button" checked>
                  <span class = "mdl-radio__label">Male</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" 
                  for = "option2">
                  <input type = "radio" id = "option2" name = "gender" 
                     class = "mdl-radio__button" >
                  <span class = "mdl-radio__label">Female</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio" for = "option3">
                  <input type = "radio" id = "option3" name = "gender" 
                     class = "mdl-radio__button" disabled>
                  <span class = "mdl-radio__label">Don't know (Disabled)</span>
               </label>      
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Arten von Kontrollkästchen als Symbole angezeigt werden können. In den folgenden Tabellen sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-icon-toggle

Identifiziert label als MDL-Komponente und ist für das label-Element erforderlich.

2

mdl-js-icon-toggle

Legt das grundlegende MDL-Verhalten auf label fest und ist für das label-Element erforderlich.

3

mdl-icon-toggle__input

Legt das grundlegende MDL-Verhalten auf Symbolumschaltung fest und ist für das Eingabeelement (Symbolumschaltung) erforderlich.

4

mdl-icon-toggle__label

Setzt das grundlegende MDL-Verhalten auf Beschriftung und ist für das i-Element (Symbol) erforderlich.

5

mdl-js-ripple-effect

Legt den Ripple-Click-Effekt fest und ist optional. geht auf das Beschriftungselement und nicht auf das Eingabeelement (Icon-Toggle).

Beispiel

Das folgende Beispiel zeigt die Verwendung von mdl-icon-toggle Klassen, um verschiedene Arten von Kontrollkästchen als Symbole anzuzeigen.

mdl_icons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Icon</td><td>Off Icon</td>
            <td>Disabled Icon</td></tr>
         <tr>
            <td> 
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-1">
                  <input type = "checkbox" id = "icon-toggle-1" 
                     class = "mdl-icon-toggle__input" checked>
                  <i class = "mdl-icon-toggle__label material-icons">format_bold</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input">
                  <i class = "mdl-icon-toggle__label material-icons">format_italic</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input" disabled>
                  <i class = "mdl-icon-toggle__label material-icons">format_underline</i>
               </label>
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Arten von Kontrollkästchen als Schalter angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-switch

Identifiziert label als MDL-Komponente und ist für das label-Element erforderlich.

2

mdl-js-switch

Legt das grundlegende MDL-Verhalten auf label fest und ist für das label-Element erforderlich.

3

mdl-switch__input

Legt das grundlegende MDL-Verhalten auf Switch fest und ist für das Eingabeelement (Switch) erforderlich.

4

mdl-switch__label

Setzt das grundlegende MDL-Verhalten auf Beschriftung und ist für das Eingabeelement (Beschriftung) erforderlich.

5

mdl-js-ripple-effect

Legt den Ripple-Click-Effekt fest und ist optional. geht auf das Beschriftungselement und nicht auf das Eingabeelement (Schalter).

Beispiel

Das folgende Beispiel hilft Ihnen, die Verwendung der mdl-switch-Klassen und die verschiedenen Arten von Kontrollkästchen als switch zu verstehen.

mdl_switches.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Switch</td><td>Off Switch</td>
            <td>Disabled Switch</td></tr>
         <tr>
            <td> 
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-1">
                  <input type = "checkbox" id = "switch-1" 
                     class = "mdl-switch__input" checked>
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input">           
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input" disabled>
               </label>
            </td>
         </tr>
      </table>   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, um verschiedene vordefinierte visuelle und Verhaltensverbesserungen anzuwenden und eine Tabelle als Datentabelle anzuzeigen. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-data-table

Identifiziert die Tabelle als MDL-Komponente und ist für das Tabellenelement erforderlich.

2

mdl-js-data-table

Setzt das grundlegende MDL-Verhalten auf Tabelle und ist für das Tabellenelement erforderlich.

3

mdl-data-table--selectable

Legt das gesamte / einzelne auswählbare Verhalten (Kontrollkästchen) fest und ist optional. geht auf Tabellenelement.

4

mdl-data-table__cell--non-numeric

Legt die Textformatierung auf die Datenzelle fest und ist optional. geht sowohl auf Tabellenkopf- als auch auf Tabellendatenzellen.

5

(none)

Standardmäßig wird die numerische Formatierung auf Header oder Datenzelle festgelegt.

Beispiel

Das folgende Beispiel hilft Ihnen, die Verwendung von zu verstehen mdl-data-table Klassen, um eine Datentabelle anzuzeigen.

mdl_data_tables.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
         <thead>
            <tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
               <th>Class</th><th>Grade</th></tr>
         </thead>
         
         <tbody>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
               <td>VI</td><td>A</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
               <td>VI</td><td>B</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
               <td>VI</td><td>A</td></tr>
         </tbody>
      </table>
   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Arten von Texteingaben angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-textfield

Identifiziert den Container als MDL-Komponente und ist für das "äußere" div-Element erforderlich.

2

mdl-js-textfield

Legt das grundlegende MDL-Verhalten auf Eingabe fest und ist für das "äußere" div-Element erforderlich.

3

mdl-textfield__input

Identifiziert das Element als Textfeldeingabe und ist für das Eingabe- oder Textbereichselement erforderlich.

4

mdl-textfield__label

Identifiziert das Element als Textfeldbeschriftung und ist für Beschriftungselemente für Eingabe- oder Textbereichselemente erforderlich.

5

mdl-textfield--floating-label

Wendet den Floating-Label-Effekt an und ist optional. geht auf "äußeres" div Element.

6

mdl-textfield__error

Identifiziert span als MDL-Fehlermeldung und ist optional. geht auf Span-Element für MDL-Eingabeelement mit Muster.

7

mdl-textfield--expandable

Identifiziert ein div als erweiterbaren MDL-Textfeldcontainer. Wird für erweiterbare Eingabefelder verwendet und ist für das "äußere" div-Element erforderlich.

8

mdl-button

Identifiziert das Etikett als MDL-Symbolschaltfläche. Wird für erweiterbare Eingabefelder verwendet und ist für das Beschriftungselement von "Outer" Div erforderlich.

9

mdl-js-button

Legt das Grundverhalten auf Symbolcontainer fest. Wird für erweiterbare Eingabefelder verwendet und ist für das Beschriftungselement von "Outer" Div erforderlich.

10

mdl-button--icon

Identifiziert das Etikett als MDL-Symbolcontainer. Wird für erweiterbare Eingabefelder verwendet und ist für das Beschriftungselement von "Outer" Div erforderlich.

11

mdl-input__expandable-holder

Identifiziert einen Container als MDL-Komponente. wird für erweiterbare Eingabefelder verwendet und ist für das "innere" div-Element erforderlich.

12

is-invalid

Identifiziert das Textfeld beim ersten Laden als ungültig und ist für das Element mdl-textfield optional.

Beispiel

Das folgende Beispiel hilft Ihnen dabei, die Verwendung der mdl-Textfeldklassen zu verstehen, um die verschiedenen Arten von Textfeldern anzuzeigen.

mdl_textfields.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Text Field</td><td>Numeric Text Field</td>
            <td>Disabled Text Field</td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
                     <label class = "mdl-textfield__label" for = "text2">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        id = "text3" disabled>
                     <label class = "mdl-textfield__label" for = "text3">
                        Disabled...</label>
                  </div>
               </form>
            </td>
         </tr>
         
         <tr><td>Simple Text Field with Floating Label</td>
            <td>Numeric Text Field with Floating Label</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" id = "text4">
                     <label class = "mdl-textfield__label" for = "text4">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
                     <label class = "mdl-textfield__label" for = "text5">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
         
         <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <textarea class = "mdl-textfield__input" type = "text" rows =  "3" 
                        id = "text7" ></textarea>
                     <label class = "mdl-textfield__label" for = "text7">Lines...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                     <label class = "mdl-button mdl-js-button mdl-button--icon" 
                        for = "text8">
                        <i class = "material-icons">search</i>
                     </label>
                     <div class = "mdl-textfield__expandable-holder">
                        <input class = "mdl-textfield__input" type = "text" id = "text8">
                        <label class = "mdl-textfield__label" for = "sample-expandable">
                           Expandable Input</label>
                     </div>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Arten von QuickInfos angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-tooltip

Identifiziert den Container als MDL-Tooltip und ist für das Tooltip-Containerelement erforderlich.

2

mdl-tooltip--large

Legt den Effekt für große Schriftarten fest und ist optional. geht auf Tooltip Container Element.

Beispiel

Das folgende Beispiel hilft Ihnen, die Verwendung von zu verstehen mdl-tooltip Klassen, um die verschiedenen Arten von QuickInfos anzuzeigen.

mdl_tooltips.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip1" class = "icon material-icons">add</div>
               <div class = "mdl-tooltip" for = "tooltip1">Follow</div>
            </td>
            
            <td>
               <div id = "tooltip2" class = "icon material-icons">print</div>
               <div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
            </td>
         </tr>
         
         <tr>
            <td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
               <div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
            </td>
            
            <td>
               <div id = "tooltip4" class = "icon material-icons">share</div>
               <div class = "mdl-tooltip" for = "tooltip4">
                  Share your content<br>using social media</div>
            </td>
         </tr>   	  
      </table>   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.