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.