Material Design Lite - Szybki przewodnik
Co to jest Material Design Lite?
Material Design Lite (MDL to biblioteka komponentów interfejsu użytkownika utworzona za pomocą CSS, JavaScript i HTML. Komponenty MDL UI pomagają w tworzeniu atrakcyjnych, spójnych i funkcjonalnych stron internetowych i aplikacji internetowych, przy jednoczesnym przestrzeganiu nowoczesnych zasad projektowania witryn internetowych, takich jak przenośność przeglądarki, niezależność od urządzenia i pełna wdzięku degradacja.
Poniżej przedstawiono najważniejsze cechy Material Design Lite -
Wbudowane responsywne projektowanie.
Standardowy CSS o minimalnej powierzchni.
Obejmuje nowe wersje typowych elementów sterujących interfejsu użytkownika, takich jak przyciski, pola wyboru i pola tekstowe, które są dostosowane do koncepcji Material Design.
Zawiera ulepszone i wyspecjalizowane funkcje, takie jak karty, układy kolumn, suwaki, pokrętła, karty, typografia i tak dalej.
Może być używany z lub bez biblioteki lub środowiska programistycznego.
Wiele przeglądarek i może być używany do tworzenia składników internetowych wielokrotnego użytku.
Elastyczny projekt
Material Design Lite ma wbudowane responsywne projektowanie, dzięki czemu strona internetowa utworzona przy użyciu Material Design Lite zostanie przeprojektowana zgodnie z rozmiarem urządzenia.
Zajęcia Material Design Lite są stworzone w taki sposób, aby serwis zmieścił się na dowolnym rozmiarze ekranu.
Strony internetowe utworzone przy użyciu Material Design Lite są w pełni kompatybilne z komputerami PC, tabletami i urządzeniami mobilnymi.
Standardowy CSS
Material Design Lite używa tylko standardowego CSS i jest bardzo łatwy do nauczenia.
Nie ma zależności od żadnej zewnętrznej biblioteki JavaScript, takiej jak jQuery.
ExtensibleMaterial Design Lite jest z założenia bardzo minimalistyczny i płaski.
Został zaprojektowany z uwzględnieniem faktu, że znacznie łatwiej jest dodawać nowe reguły CSS niż nadpisywać istniejące reguły CSS.
Obsługuje cienie i odważne kolory.
Kolory i odcienie pozostają jednolite na różnych platformach i urządzeniach.
A co najważniejsze, MDL jest całkowicie darmowy.
Istnieją dwa sposoby korzystania z Material Design Lite -
Local Installation - Możesz pobrać materiał. {Primary} - {accent} .min.css i pliki material.min.js na swój lokalny komputer i dołączyć go do kodu HTML.
CDN Based Version - Możesz dołączyć pliki. {Primary} - {accent} .min.css i material.min.js do kodu HTML bezpośrednio z sieci dostarczania treści (CDN).
Instalacja lokalna
Wykonaj następujące kroki, aby zainstalować MDL -
Iść do https://www.getmdl.io/started/index.html aby pobrać najnowszą dostępną wersję.
Następnie umieść pobrany plik material.min.js plik w katalogu Twojej witryny, np. / js i material.min.css w / css.
Przykład
Teraz możesz dołączyć plik css i js do pliku HTML w następujący sposób -
<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>Powyższy program wygeneruje następujący wynik -
Wersja oparta na CDN
Pliki js i css można dołączyć do kodu HTML bezpośrednio z sieci dostarczania treści (CDN). storage.googleapis.com zawiera zawartość najnowszej wersji.
W tym samouczku korzystamy z biblioteki storage.googleapis.com w wersji CDN.
Przykład
Teraz przepiszmy powyższy przykład, używając material.css i material.js z Google CDN.
<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>Powyższy program wygeneruje następujący wynik -
W tym rozdziale omówimy różne układy w Material Design Lite. HTML5 ma następujące elementy kontenera -
<div> - Zapewnia ogólny kontener na zawartość HTML.
<header> - Reprezentuje sekcję nagłówka.
<footer> - Reprezentuje sekcję stopki.
<article> - Reprezentuje artykuły.
<section> - Zapewnia ogólny kontener dla różnych typów przekrojów.
MDL zapewnia różne klasy CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych w kontenerach. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-layout Identyfikuje kontener jako składnik MDL. Wymagane na zewnętrznym elemencie pojemnika. |
| 2 | mdl-js-layout Dodaje podstawowe zachowanie MDL do układu. Wymagane na zewnętrznym elemencie pojemnika. |
| 3 | mdl-layout__header Identyfikuje kontener jako składnik MDL. Wymagane w elemencie nagłówka. |
| 4 | mdl-layout-icon Służy do dodawania ikony aplikacji. Jest zastępowany ikoną menu, jeśli oba są widoczne. Opcjonalny element ikony. |
| 5 | mdl-layout__header-row Identyfikuje kontener jako wiersz nagłówka MDL. Wymagane w kontenerze treści nagłówka. |
| 6 | mdl-layout__title Identyfikuje tekst tytułu układu. Wymagane w kontenerze tytułu układu. |
| 7 | mdl-layout-spacer Służy do wyrównywania elementów wewnątrz nagłówka lub szuflady. Rośnie, wypełniając pozostałą przestrzeń. Często używany do wyrównywania elementów do prawej strony. Opcjonalnie w div po tytule układu. |
| 8 | mdl-navigation Identyfikuje kontener jako grupę nawigacyjną MDL. Wymagane w elemencie nawigacyjnym. |
| 9 | mdl-navigation__link Identyfikuje kotwicę jako łącze nawigacyjne MDL. Wymagane na elementach kotwiących nadproża i / lub szuflady. |
| 10 | mdl-layout__drawer Identyfikuje kontener jako szufladę układu MDL. Wymagane na elemencie pojemnika szuflady. |
| 11 | mdl-layout__content Identyfikuje kontener jako zawartość układu MDL. Wymagane na głównym elemencie. |
| 12 | mdl-layout__header--scroll Powoduje przewijanie nagłówka wraz z zawartością. Opcjonalny element nagłówka. |
| 13 | mdl-layout--fixed-drawer Sprawia, że szuflada jest zawsze widoczna i otwarta na większych ekranach. Opcjonalnie na zewnętrznym elemencie pojemnika, a nie na elemencie pojemnika szufladowego. |
| 14 | mdl-layout--fixed-header Sprawia, że nagłówek jest zawsze widoczny, nawet na małych ekranach. Opcjonalnie na zewnętrznym elemencie pojemnika. |
| 15 | mdl-layout--large-screen-only Ukrywa element na mniejszych ekranach. Opcjonalne na każdym potomku mdl-layout. |
| 16 | mdl-layout--small-screen-only Ukrywa element na większych ekranach. Opcjonalne na każdym potomku mdl-layout. |
| 17 | mdl-layout__header--waterfall Pozwala na efekt „kaskady” z wieloma wierszami nagłówka. Opcjonalny element nagłówka. |
| 18 | mdl-layout__header--transparent Sprawia, że nagłówek jest przezroczysty i rysuje na wierzchu tła układu. Opcjonalny element nagłówka. |
| 19 | mdl-layout__header--seamed Używa nagłówka bez cienia. Opcjonalny element nagłówka. |
| 20 | mdl-layout__tab-bar Identyfikuje kontener jako pasek kart MDL. Wymagane w elemencie kontenera w nagłówku (układ z zakładkami). |
| 21 | mdl-layout__tab Identyfikuje zakotwiczenie jako łącze karty MDL. Wymagane w przypadku elementów zakotwiczenia paska zakładek. |
| 22 | is-active Identyfikuje kartę jako domyślną aktywną kartę. Opcjonalne w elemencie zakotwiczenia paska zakładek i skojarzonym elemencie sekcji zakładki |
| 23 | mdl-layout__tab-panel Identyfikuje kontener jako panel zawartości karty. Wymagane w elementach sekcji karty. |
| 24 | mdl-layout--fixed-tabs Używa stałych zakładek zamiast domyślnych przewijanych zakładek. Opcjonalne na zewnętrznym elemencie kontenera, nie w nagłówku kontenera. |
Poniższe przykłady pokazują użycie klasy mdl-layout do stylizacji różnych kontenerów.
Szuflada stała
Aby utworzyć szablon ze stałą szufladą, ale bez nagłówka, używane są następujące klasy MDL.
mdl-layout - Identyfikuje element DIV jako składnik MDL.
mdl-js-layout - Dodaje podstawowe zachowanie MDL do zewnętrznego elementu DIV.
mdl-layout--fixed-drawer - Sprawia, że szuflada jest zawsze widoczna i otwarta na większych ekranach.
mdl-layout__drawer - Identyfikuje element DIV jako szufladę układu MDL.
mdl-layout-title - Identyfikuje tekst tytułu układu.
mdl-navigation - Identyfikuje div jako grupę nawigacji MDL.
mdl-navigation__link - Identyfikuje kotwicę jako link nawigacyjny MDL.
mdl-layout__content - Identyfikuje element DIV jako zawartość układu MDL.
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>Wynik
Sprawdź wynik.
Naprawiono nagłówek
Do stworzenia szablonu ze stałym nagłówkiem używana jest dodatkowa klasa MDL.
mdl-layout--fixed-header - Sprawia, że nagłówek jest zawsze widoczny, nawet na małych ekranach.
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>Wynik
Sprawdź wynik.
Naprawiono nagłówek i szufladę
Aby utworzyć szablon ze stałym nagłówkiem i stałą szufladą, używane są następujące dodatkowe klasy MDL.
mdl-layout--fixed-drawer - Sprawia, że szuflada jest zawsze widoczna i otwarta na większych ekranach.
mdl-layout--fixed-header - Sprawia, że nagłówek jest zawsze widoczny, nawet na małych ekranach.
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>Wynik
Sprawdź wynik.
Przewijany nagłówek
Aby utworzyć szablon z przewijanym nagłówkiem, używane są następujące klasy MDL.
mdl-layout--header--scroll - Powoduje przewijanie nagłówka wraz z zawartością.
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>Wynik
Sprawdź wynik.
Nagłówek umowy
Aby utworzyć szablon z nagłówkiem, który kurczy się podczas przewijania strony w dół, używana jest następująca klasa MDL.
mdl-layout__header--waterfall - Pozwala na efekt „wodospadu” z wieloma wierszami nagłówka.
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>Wynik
Sprawdź wynik.
Naprawiono nagłówek z przewijanymi kartami
Aby utworzyć szablon z nagłówkiem z przewijanymi kartami, używane są następujące klasy MDL.
mdl-layout__tab-bar - Identyfikuje kontener jako pasek kart MDL.
mdl-layout__tab - Identyfikuje kotwicę jako łącze karty MDL.
mdl-layout__tab-panel - Identyfikuje kontener jako panel zawartości karty.
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>Wynik
Sprawdź wynik.
Naprawiono nagłówek ze stałymi zakładkami
Aby utworzyć szablon z nagłówkiem z ustalonymi zakładkami, używana jest następująca dodatkowa klasa MDL.
mdl-layout--fixed-tabs - Używa stałych zakładek zamiast domyślnych przewijanych zakładek.
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>Wynik
Sprawdź wynik.
Siatka Material Design Lite (MDL) jest składnikiem do układania treści dla różnych rozmiarów ekranu. Siatka MDL jest zdefiniowana i ujęta w element container / div. Siatka ma 12 kolumn na ekranie rozmiaru pulpitu, 8 na ekranie rozmiaru tabletu i 4 na ekranie rozmiaru telefonu, gdzie każdy rozmiar ma wstępnie zdefiniowane marginesy i odstępy. Komórki są rozmieszczone sekwencyjnie w rzędzie, w kolejności, w jakiej zostały zdefiniowane, z następującymi wyjątkami:
Jeśli komórka siatki nie pasuje do wiersza o jednym z rozmiarów ekranu, przechodzi do następującego wiersza.
Jeśli komórka siatki ma określony rozmiar kolumny równy lub większy niż liczba kolumn dla rozmiaru ekranu, zajmuje ona cały wiersz.
MDL zapewnia różne klasy CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych w siatce. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-layout Identyfikuje kontener jako składnik MDL. Wymagane na zewnętrznym elemencie pojemnika. |
| 2 | mdl-grid Identyfikuje kontener jako składnik siatki MDL. Wymagane w „zewnętrznym” elemencie div. |
| 3 | mdl-cell Identyfikuje kontener jako komórkę MDL. Wymagane w przypadku „wewnętrznych” elementów div. |
| 4 | mdl-grid--no-spacing Aktualizuje komórki siatki, aby nie miały między nimi marginesu. Opcjonalnie do pojemnika siatkowego. |
| 5 | mdl-cell--N-col Pomaga to ustawić rozmiar kolumny dla komórki na N, N to 1-12 włącznie, domyślnie 4; opcjonalne dla „wewnętrznych” elementów div. |
| 6 | mdl-cell--N-col-desktop Pomaga to ustawić rozmiar kolumny komórki na N tylko w trybie pulpitu, N to 1-12 włącznie; opcjonalne dla „wewnętrznych” elementów div. |
| 7 | mdl-cell--N-col-tablet Pomaga to ustawić rozmiar kolumny dla komórki na N tylko w trybie tabletu, N to 1-8 włącznie; opcjonalne dla „wewnętrznych” elementów div. |
| 8 | mdl-cell--N-col-phone Pomaga to ustawić rozmiar kolumny komórki na N tylko w trybie telefonu, N to 1-4 włącznie; opcjonalne dla „wewnętrznych” elementów div. |
| 9 | mdl-cell--hide-desktop Ukrywa komórkę w trybie pulpitu. Opcjonalne dla „wewnętrznych” elementów div. |
| 10 | mdl-cell--hide-tablet Ukrywa komórkę w trybie tabletu. Opcjonalne dla „wewnętrznych” elementów div. |
| 11 | mdl-cell--hide-phone Ukrywa komórkę w trybie telefonu. Opcjonalne dla „wewnętrznych” elementów div. |
| 12 | mdl-cell--stretch Rozciąga komórkę w pionie, aby wypełnić komórkę macierzystą, domyślnie; opcjonalne dla „wewnętrznych” elementów div. |
| 13 | mdl-cell--top Wyrównuje komórkę do góry elementu nadrzędnego. Opcjonalne dla „wewnętrznych” elementów div. |
| 14 | mdl-cell--middle Wyrównuje komórkę do środka elementu nadrzędnego. Opcjonalne dla „wewnętrznych” elementów div. |
| 15 | mdl-cell--bottom Wyrównuje komórkę do dołu elementu nadrzędnego. Opcjonalne dla „wewnętrznych” elementów div. |
Przykład
Poniższy przykład pomoże ci zrozumieć użycie klasy mdl-grid do układania zawartości na różnych ekranach.
W tym przykładzie zostaną użyte poniższe klasy MDL.
mdl-layout - Identyfikuje element DIV jako składnik MDL.
mdl-js-layout - Dodaje podstawowe zachowanie MDL do zewnętrznego elementu DIV.
mdl-layout--fixed-header - Sprawia, że nagłówek jest zawsze widoczny, nawet na małych ekranach.
mdl-layout__header-row - Identyfikuje kontener jako wiersz nagłówka MDL.
mdl-layout__drawer - Identyfikuje element DIV jako szufladę układu MDL.
mdl-layout-title - Identyfikuje tekst tytułu układu.
mdl-navigation - Identyfikuje div jako grupę nawigacji MDL.
mdl-navigation__link - Identyfikuje kotwicę jako link nawigacyjny MDL.
mdl-layout__content - Identyfikuje element DIV jako zawartość układu MDL.
mdl-grid - Identyfikuje div jako składnik siatki MDL.
mdl-cell - Identyfikuje element DIV jako komórkę MDL.
mdl-cell--1-col - Ustawia rozmiar kolumny dla komórki na 1 komórkę z 12 komórek na ekranie komputera.
mdl-cell--2-col - Ustawia rozmiar kolumny dla komórki na 2 komórki z 12 komórek rozmiaru ekranu komputera.
mdl-cell--4-col - Ustawia rozmiar kolumny dla komórki na 4 z 12 komórek na ekranie komputera.
mdl-cell--6-col - Ustawia rozmiar kolumny dla komórki na 6 z 12 komórek na ekranie komputera.
mdl-cell--4-col-phone - Ustawia rozmiar kolumny dla komórki na 4 z 4 komórek w rozmiarze ekranu telefonu.
mdl-cell--6-col-tablet - Ustawia rozmiar kolumny dla komórki na 6 z 8 komórek w rozmiarze ekranu tabletu.
mdl-cell--8-col-tablet - Ustawia rozmiar kolumny dla komórki na 8 z 8 komórek w rozmiarze ekranu tabletu.
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>Wynik
Sprawdź wynik.
Komponent zakładki Material Design Lite (MDL) to składnik interfejsu użytkownika, który pomaga wyświetlać wiele ekranów w jednym miejscu w wyjątkowy sposób.
MDL zapewnia różne klasy CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych na kartach. W poniższej tabeli wymieniono dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-layout Identyfikuje kontener jako składnik MDL. Wymagane na zewnętrznym elemencie pojemnika. |
| 2 | mdl-tabs Identyfikuje kontener kart jako składnik MDL. Wymagane w „zewnętrznym” elemencie div. |
| 3 | mdl-js-tabs Ustawia podstawowe zachowanie MDL w kontenerze kart. Wymagane w „zewnętrznym” elemencie div. |
| 4 | mdl-js-ripple-effect Dodaje efekt tętniącego kliknięcia do linków zakładek. Opcjonalny; przechodzi na „zewnętrzny” element div. |
| 5 | mdl-tabs__tab-bar Identyfikuje kontener jako pasek łączy kart MDL. Wymagane w pierwszym „wewnętrznym” elemencie div. |
| 6 | mdl-tabs__tab Identyfikuje kotwicę (łącze) jako aktywator karty MDL. Wymagane we wszystkich linkach w pierwszym „wewnętrznym” elemencie div. |
| 7 | is-active Identyfikuje kartę jako domyślną kartę wyświetlania. Wymagane w jednym (i tylko jednym) z „wewnętrznych” elementów div (tab). |
| 8 | mdl-tabs__panel Identyfikuje kontener jako zawartość karty. Wymagane w każdym z „wewnętrznych” elementów div (tab). |
Przykład
Poniższy przykład pomoże ci zrozumieć użycie klasy mdl-tab do układania zawartości na różnych kartach.
W tym przykładzie zostaną użyte poniższe klasy MDL -
mdl-layout - Identyfikuje element DIV jako składnik MDL.
mdl-js-layout - Dodaje podstawowe zachowanie MDL do zewnętrznego elementu DIV.
mdl-layout--fixed-header - Sprawia, że nagłówek jest zawsze widoczny, nawet na małych ekranach.
mdl-layout__header-row - Identyfikuje kontener jako wiersz nagłówka MDL.
mdl-layout-title - Identyfikuje tekst tytułu układu.
mdl-layout__content - Identyfikuje element DIV jako zawartość układu MDL.
mdl-tabs - Identyfikuje kontener kart jako składnik MDL.
mdl-js-tabs - Ustawia podstawowe zachowanie MDL na kontener kart.
mdl-tabs__tab-bar - Identyfikuje kontener jako pasek łączy kart MDL.
mdl-tabs__tab - Identyfikuje kotwicę (link) jako aktywator zakładki MDL.
is-active - Identyfikuje kartę jako domyślną kartę wyświetlania.
mdl-tabs__panel - Identyfikuje kontener jako zawartość karty.
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>Wynik
Sprawdź wynik.
Składnik stopki MDL występuje w dwóch podstawowych formach: mega-footer i mini-footer. mega-stopka zawiera bardziej złożoną zawartość niż mini-stopka. Mega stopka może reprezentować wiele sekcji treści, które są oddzielone poziomymi regułami, podczas gdy mini stopka przedstawia jedną sekcję treści. Stopki zazwyczaj zawierają zarówno treści informacyjne, jak i klikalne, takie jak linki.
MDL zapewnia różne klasy CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych w mega-stopce i mini-stopce. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-mega-footer Identyfikuje kontener jako składnik wielkiej stopki MDL. Wymagane dla elementu stopki. |
| 2 | mdl-mega-footer__top-section Identyfikuje kontener jako górną sekcję stopki. Wymagane dla „zewnętrznego” elementu div sekcji górnej. |
| 3 | mdl-mega-footer__left-section Identyfikuje kontener jako lewą sekcję. Wymagane dla „wewnętrznego” elementu div lewej sekcji. |
| 4 | mdl-mega-footer__social-btn Identyfikuje ozdobny kwadrat w mega stopce. Wymagane dla elementu przycisku (jeśli jest używany). |
| 5 | mdl-mega-footer__right-section Identyfikuje kontener jako prawą sekcję. Wymagane dla „wewnętrznego” elementu div prawej sekcji. |
| 6 | mdl-mega-footer__middle-section Identyfikuje kontener jako środkową sekcję stopki. Wymagane dla „zewnętrznego” elementu div sekcji środkowej. |
| 7 | mdl-mega-footer__drop-down-section Identyfikuje kontener jako rozwijany (pionowy) obszar zawartości. Wymagane w przypadku rozwijanych „wewnętrznych” elementów div. |
| 8 | mdl-mega-footer__heading Identyfikuje nagłówek jako nagłówek wielostopkowy. Wymagane dla elementu h1 w sekcji rozwijanej. |
| 9 | mdl-mega-footer__link-list Identyfikuje nieuporządkowaną listę jako listę rozwijaną (pionową). Wymagane dla elementu ul w rozwijanej sekcji. |
| 10 | mdl-mega-footer__bottom-section Identyfikuje kontener jako dolną sekcję stopki. Wymagane dla „zewnętrznego” elementu div sekcji dolnej. |
| 11 | mdl-logo Identyfikuje kontener jako nagłówek sekcji ze stylem. Wymagane dla „wewnętrznego” elementu div w dolnej sekcji mega-stopki lub lewej mini-stopki. |
| 12 | mdl-mini-footer Identyfikuje kontener jako komponent mini-stopki MDL. Wymagane dla elementu stopki. |
| 13 | mdl-mini-footer__left-section Identyfikuje kontener jako lewą sekcję. Wymagane dla „wewnętrznego” elementu div lewej sekcji. |
| 14 | mdl-mini-footer__link-list Identyfikuje nieuporządkowaną listę jako listę wbudowaną (poziomą). Wymagane dla elementu równorzędnego ul elementu div „mdl-logo”. |
| 15 | mdl-mini-footer__right-section Identyfikuje kontener jako prawą sekcję. Wymagane dla „wewnętrznego” elementu div prawej sekcji. |
| 16 | mdl-mini-footer__social-btn Wskazuje ozdobny kwadrat w mini-stopce. Wymagane dla elementu przycisku (jeśli jest używany). |
Zobaczmy teraz kilka przykładów, aby zrozumieć użycie klas stopek MDL do stylizacji stopek.
Mega Footer
Omówmy użycie mdl-mega-footerdo zawartości układu w stopce. W tym przykładzie zostaną użyte następujące klasy MDL.
mdl-layout - Identyfikuje element DIV jako składnik MDL.
mdl-js-layout - Dodaje podstawowe zachowanie MDL do zewnętrznego elementu DIV.
mdl-layout--fixed-header - Sprawia, że nagłówek jest zawsze widoczny, nawet na małych ekranach.
mdl-layout__header-row - Identyfikuje kontener jako wiersz nagłówka MDL.
mdl-layout-title - Identyfikuje tekst tytułu układu.
mdl-layout__content - Identyfikuje element DIV jako zawartość układu MDL.
mdl-mega-footer - Identyfikuje kontener jako wielostopkowy komponent MDL.
mdl-mega-footer__top-section - Identyfikuje kontener jako górną sekcję stopki.
mdl-mega-footer__left-section - Identyfikuje pojemnik jako lewą sekcję.
mdl-mega-footer__social-btn - Wskazuje ozdobny kwadrat w mini-stopce.
mdl-mega-footer__right-section - Identyfikuje pojemnik jako prawą sekcję.
mdl-mega-footer__middle-section - Identyfikuje kontener jako środkową sekcję stopki.
mdl-mega-footer__drop-down-section - Identyfikuje kontener jako rozwijany (pionowy) obszar zawartości.
mdl-mega-footer__heading - Identyfikuje nagłówek jako nagłówek wielostopkowy.
mdl-mega-footer__link-list - Identyfikuje nieuporządkowaną listę jako listę wbudowaną (poziomą).
mdl-mega-footer__bottom-section - Identyfikuje kontener jako dolną część stopki.
mdl-logo - Identyfikuje kontener jako nagłówek sekcji ze stylem.
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>Wynik
Sprawdź wynik.
Mini Footer
Poniższy przykład pomoże ci zrozumieć sposób użycia mdl-mini-footer do zawartości układu w stopce.
W tym przykładzie zostaną użyte poniższe klasy MDL.
mdl-layout - Identyfikuje element DIV jako składnik MDL.
mdl-js-layout - Dodaje podstawowe zachowanie MDL do zewnętrznego elementu DIV.
mdl-layout--fixed-header - Sprawia, że nagłówek jest zawsze widoczny, nawet na małych ekranach.
mdl-layout__header-row - Identyfikuje kontener jako wiersz nagłówka MDL.
mdl-layout-title - Identyfikuje tekst tytułu układu.
mdl-layout__content - Identyfikuje element DIV jako zawartość układu MDL.
mdl-mini-footer - Identyfikuje kontener jako komponent mini-stopki MDL.
mdl-mini-footer__left-section - Identyfikuje pojemnik jako lewą sekcję.
mdl-logo - Identyfikuje kontener jako nagłówek sekcji ze stylem.
mdl-mini-footer__link-list - Identyfikuje nieuporządkowaną listę jako listę wbudowaną (poziomą).
mdl-mini-footer__right-section - Identyfikuje pojemnik jako prawą sekcję.
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>Wynik
Sprawdź wynik.
Składnik identyfikatora MDL to powiadomienie ekranowe, które może być liczbą lub ikoną. Zwykle jest używany do podkreślenia liczby elementów.
MDL zapewnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych na odznakach. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-badge Identyfikuje element jako składnik odznaki MDL. Wymagane w przypadku elementu span lub link. |
| 2 | mdl-badge--no-background Nakłada efekt otwartego koła na odznakę i jest opcjonalne. |
| 3 | mdl-badge--overlap Sprawia, że znaczek zachodzi na swój pojemnik i jest opcjonalny. |
| 4 | data-badge="value" Przypisuje ciąg znaków do identyfikatora używanego jako atrybut; wymagane na przęśle lub łączu. |
Przykład
Poniższy przykład pomoże ci zrozumieć sposób użycia mdl-badge klasy, aby dodać powiadomienia do elementów span i link.
W tym przykładzie zostaną użyte poniższe klasy MDL.
mdl-badge - Identyfikuje element jako komponent identyfikatora MDL.
data-badge- przypisuje do znaczka wartość ciągu. Ikony można przypisać do niego za pomocą symboli HTML.
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>Wynik
Sprawdź wynik.
MDL udostępnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych do przycisków. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-button Ustawia przycisk jako składnik MDL, wymagany. |
| 2 | mdl-js-button Dodaje podstawowe zachowanie MDL do przycisku, wymagane. |
| 3 | (none) Ustawia efekt płaskiego wyświetlania na przycisk, domyślnie. |
| 4 | mdl-button--raised Ustawia podniesiony efekt wyświetlania; jest to wzajemnie wykluczające się w przypadku fab, mini-fab i icon. |
| 5 | mdl-button--fab Ustawia bajeczny (okrągły) efekt wyświetlania; jest to wzajemnie wykluczające się w przypadku podniesionych, mini-fab i ikon. |
| 6 | mdl-button--mini-fab Ustawia efekt wyświetlania mini-fab (mały fab okrągły); jest to wzajemnie wykluczające się w przypadku podniesionych, fab i ikon. |
| 7 | mdl-button--icon Ustawia efekt wyświetlania ikon (mały zwykły okrągły); jest to wzajemnie wykluczające się z podniesionymi, fab i mini-fab. |
| 8 | mdl-button--colored Ustawia kolorowy efekt wyświetlania, w którym kolory są zdefiniowane w material.min.css. |
| 9 | mdl-button--primary Ustawia efekt wyświetlania koloru podstawowego, w którym kolory są zdefiniowane w material.min.css. |
| 10 | mdl-button--accent Ustawia efekt wyświetlania koloru akcentującego, w którym kolory są zdefiniowane w material.min.css. |
| 11 | mdl-js-ripple-effect Ustawia efekt kliknięcia tętnienia, może być używany w połączeniu z dowolną inną klasą. |
Przykład
Poniższy przykład pomoże ci zrozumieć sposób użycia mdl-button klasy, aby pokazać różne typy przycisków.
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>Wynik
Sprawdź wynik.
MDL zapewnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów kart. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-card Identyfikuje element div jako kontener karty MDL, wymagany w „zewnętrznym” div. |
| 2 | mdl-card--border Umieszcza obramowanie w sekcji karty, do której jest stosowana, i jest używana w „wewnętrznych” elementach div. |
| 3 | mdl-shadow--2dp through mdl-shadow--16dp Ustawia zmienne głębie cienia (2, 3, 4, 6, 8 lub 16) na karcie i jest opcjonalne, przechodzi do „zewnętrznego” div; jeśli pominięty, nie jest wyświetlany żaden cień. |
| 4 | mdl-card__title Identyfikuje element div jako kontener tytułu karty i jest wymagany w „wewnętrznym” elemencie div tytułu. |
| 5 | mdl-card__title-text Dodaje odpowiednią charakterystykę tekstu do tytułu karty i jest wymagany na tagu head (H1 - H6) wewnątrz div title. |
| 6 | mdl-card__subtitle-text Dodaje charakterystykę tekstu do podtytułu karty i jest opcjonalna. Powinien to być element podrzędny elementu tytułowego. |
| 7 | mdl-card__media Identyfikuje element div jako kontener multimediów karty i jest wymagany w „wewnętrznym” elemencie div. |
| 8 | mdl-card__supporting-text Identyfikuje element div jako kontener tekstu treści karty i przypisuje odpowiednie właściwości tekstu do tekstu podstawowego i jest wymagany w „wewnętrznym” elemencie div dla tekstu podstawowego; tekst trafia bezpośrednio do elementu DIV bez pośrednich kontenerów. |
| 9 | mdl-card__actions Identyfikuje element div jako kontener działań na karcie i przypisuje odpowiednie właściwości tekstowe do tekstu akcji i jest wymagany w „wewnętrznym” elemencie div akcji; treść trafia bezpośrednio do elementu DIV bez pośredniczących kontenerów. |
Przykład
Poniższy przykład pomoże ci zrozumieć użycie klas mdl-tooltip do wyświetlania różnych typów podpowiedzi.
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>Wynik
Sprawdź wynik.
MDL zapewnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów pasków postępu. W poniższej tabeli wymieniono dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-js-progress Ustawia podstawowe zachowanie MDL na wskaźnik postępu i jest klasą wymaganą. |
| 2 | mdl-progress__indeterminate Ustawia animację na wskaźnik postępu i jest klasą opcjonalną. |
Przykład
Poniższy przykład pomoże ci zrozumieć sposób użycia mdl-js-progress klasy, aby pokazać różne typy pasków postępu.
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>Wynik
Sprawdź wynik.
MDL zapewnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów spinnerów. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-spinner Identyfikuje kontener jako składnik pokrętła MDL i jest wymaganą klasą. |
| 2 | mdl-js-spinner Ustawia podstawowe zachowanie MDL na spinner i jest klasą wymaganą. |
| 3 | is-active Pokazuje i animuje pokrętło i jest opcjonalne. |
| 4 | mdl-spinner--single-color Używa jednego koloru zamiast zmiany kolorów i jest opcjonalne. |
Przykład
Poniższy przykład pomoże ci zrozumieć sposób użycia mdl-spinner klasy i różne rodzaje błystek.
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>Wynik
Sprawdź wynik.
MDL zapewnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów menu. Poniższa tabela zawiera listę dostępnych klas i ich skutków
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-button Identyfikuje przycisk jako składnik MDL i jest wymagany w elemencie przycisku. |
| 2 | mdl-js-button Ustawia podstawowe zachowanie MDL na przycisk i jest wymagane w elemencie przycisku. |
| 3 | mdl-button--icon Ustawia ikonę na przycisk i jest wymagana w elemencie przycisku. |
| 4 | material-icons Identyfikuje rozpiętość jako ikonę materiału i jest wymagana w elemencie wbudowanym. |
| 5 | mdl-menu Identyfikuje nieuporządkowany kontener listy jako składnik MDL i jest wymagany w elemencie ul. |
| 6 | mdl-js-menu Ustawia podstawowe zachowanie MDL na menu i jest wymagane w elemencie ul. |
| 7 | mdl-menu__item Identyfikuje przyciski jako opcje menu MDL i ustawia podstawowe zachowanie MDL wymagane w elementach pozycji listy. |
| 8 | mdl-js-ripple-effect Ustawia efekt kliknięcia falującego na łącza opcji i jest opcjonalny; wymagane w nieuporządkowanym elemencie listy. |
| 9 | mdl-menu--top-left Ustawia pozycję menu nad przyciskiem, wyrównuje lewą krawędź menu z przyciskiem i jest opcjonalna; wymagane w nieuporządkowanym elemencie listy. |
| 10 | (none) Domyślnie menu jest umieszczone pod przyciskiem, wyrównane do lewej krawędzi z przyciskiem. |
| 11 | mdl-menu--top-right Menu jest umieszczone nad przyciskiem, wyrównane do prawej krawędzi z przyciskiem, opcjonalne i przechodzi do nieuporządkowanego elementu listy. |
| 12 | mdl-menu--bottom-right menu jest umieszczone pod przyciskiem, wyrównane do prawej krawędzi z przyciskiem, opcjonalne i przechodzi do nieuporządkowanego elementu listy. |
Przykład
Poniższy przykład pomoże ci zrozumieć sposób użycia mdl-spinner zajęcia pokazujące różne typy błystek.
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>Wynik
Sprawdź wynik.
MDL zapewnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów menu. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-slider Identyfikuje element wejściowy jako składnik MDL i jest wymagany. |
| 2 | mdl-js-slider Ustawia podstawowe zachowanie MDL dla elementu wejściowego i jest wymagane. |
Przykład
Poniższy przykład pomoże ci zrozumieć użycie klas mdl-slider do pokazania różnych typów suwaków.
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>Wynik
Sprawdź wynik.
MDL udostępnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów pól wyboru. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-checkbox Identyfikuje etykietę jako składnik MDL i jest wymagany w elemencie etykiety. |
| 2 | mdl-js-checkbox Ustawia podstawowe zachowanie MDL do etykietowania i jest wymagane w elemencie etykiety. |
| 3 | mdl-checkbox__input Ustawia podstawowe zachowanie MDL na pole wyboru i jest wymagane w elemencie wejściowym (pole wyboru). |
| 4 | mdl-checkbox__label Ustawia podstawowe zachowanie MDL na podpis i jest wymagane w elemencie span (podpis). |
| 5 | mdl-js-ripple-effect Ustawia efekt kliknięcia tętnienia i jest opcjonalny; trafia na element etykiety, a nie na element wejściowy (pole wyboru). |
Przykład
Poniższy przykład pomoże Ci zrozumieć użycie klas mdl-slider do pokazania różnych typów pól wyboru.
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>Wynik
Sprawdź wynik.
MDL zapewnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów przycisków opcji. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-radio Identyfikuje etykietę jako składnik MDL i jest wymagany w elemencie etykiety. |
| 2 | mdl-js-radio Ustawia podstawowe zachowanie MDL do etykietowania i jest wymagane w elemencie etykiety. |
| 3 | mdl-radio__button Ustawia podstawowe zachowanie MDL na radio i jest wymagane w elemencie wejściowym (przycisk opcji). |
| 4 | mdl-radio__label Ustawia podstawowe zachowanie MDL na podpis i jest wymagane w elemencie span (podpis). |
| 5 | mdl-js-ripple-effect Ustawia efekt kliknięcia tętnienia i jest opcjonalny; przechodzi na element etykiety, a nie na element wejściowy (przycisk opcji). |
Przykład
Poniższy przykład pomoże ci zrozumieć użycie klas mdl-slider do wyświetlania różnych typów przycisków opcji.
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>Wynik
Sprawdź wynik.
MDL udostępnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów pól wyboru jako ikon. W poniższych tabelach wymieniono dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-icon-toggle Identyfikuje etykietę jako składnik MDL i jest wymagany w elemencie etykiety. |
| 2 | mdl-js-icon-toggle Ustawia podstawowe zachowanie MDL do etykietowania i jest wymagane w elemencie etykiety. |
| 3 | mdl-icon-toggle__input Ustawia podstawowe zachowanie MDL na przełączanie ikon i jest wymagane w elemencie wejściowym (przełączanie ikon). |
| 4 | mdl-icon-toggle__label Ustawia podstawowe zachowanie MDL na podpis i jest wymagane w elemencie i (ikona). |
| 5 | mdl-js-ripple-effect Ustawia efekt kliknięcia tętnienia i jest opcjonalny; przechodzi do elementu etykiety, a nie do elementu wejściowego (przełączanie ikon). |
Przykład
Poniższy przykład ilustruje użycie mdl-icon-toggle klasy, aby wyświetlać różne typy pól wyboru jako ikony.
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>Wynik
Sprawdź wynik.
MDL zapewnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów pól wyboru jako przełączników. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-switch Identyfikuje etykietę jako składnik MDL i jest wymagany w elemencie etykiety. |
| 2 | mdl-js-switch Ustawia podstawowe zachowanie MDL do etykietowania i jest wymagane w elemencie etykiety. |
| 3 | mdl-switch__input Ustawia podstawowe zachowanie MDL na przełączanie i jest wymagane w elemencie wejściowym (przełączniku). |
| 4 | mdl-switch__label Ustawia podstawowe zachowanie MDL na podpis i jest wymagane w elemencie wejściowym (podpis). |
| 5 | mdl-js-ripple-effect Ustawia efekt kliknięcia tętnienia i jest opcjonalny; przechodzi na element etykiety, a nie na element wejściowy (przełącznik). |
Przykład
Poniższy przykład pomoże ci zrozumieć użycie klas mdl-switch i różnych typów pól wyboru jako przełączników.
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>Wynik
Sprawdź wynik.
MDL zapewnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania tabeli jako tabeli danych. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-data-table Identyfikuje tabelę jako składnik MDL i jest wymagany w elemencie tabeli. |
| 2 | mdl-js-data-table Ustawia podstawowe zachowanie MDL na table i jest wymagane w elemencie tabeli. |
| 3 | mdl-data-table--selectable Ustawia wszystkie / indywidualne zachowania do wyboru (pola wyboru) i jest opcjonalne; przechodzi na element tabeli. |
| 4 | mdl-data-table__cell--non-numeric Ustawia formatowanie tekstu na komórkę danych i jest opcjonalne; przechodzi zarówno do nagłówka tabeli, jak i komórek danych tabeli. |
| 5 | (none) Domyślnie ustawia formatowanie liczbowe na nagłówek lub komórkę danych. |
Przykład
Poniższy przykład pomoże ci zrozumieć sposób użycia mdl-data-table klasy, aby wyświetlić tabelę danych.
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>Wynik
Sprawdź wynik.
MDL udostępnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów danych wejściowych. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-textfield Identyfikuje pojemnik jako składnik MDL i jest wymagany w „zewnętrznym” elemencie div. |
| 2 | mdl-js-textfield Ustawia podstawowe zachowanie MDL na dane wejściowe i jest wymagane w „zewnętrznym” elemencie div. |
| 3 | mdl-textfield__input Identyfikuje element jako pole tekstowe i jest wymagany w przypadku elementu wejściowego lub elementu textarea. |
| 4 | mdl-textfield__label Identyfikuje element jako etykietę pola tekstowego i jest wymagany w elemencie etykiety dla elementów wejściowych lub tekstowych. |
| 5 | mdl-textfield--floating-label Stosuje efekt pływającej etykiety i jest opcjonalny; przechodzi na „zewnętrzny” element div. |
| 6 | mdl-textfield__error Identyfikuje span jako komunikat o błędzie MDL i jest opcjonalny; przechodzi na element span dla elementu wejściowego MDL ze wzorcem. |
| 7 | mdl-textfield--expandable Identyfikuje element DIV jako kontener rozwijanego pola tekstowego MDL; używany do rozwijanych pól wejściowych i jest wymagany w „zewnętrznym” elemencie div. |
| 8 | mdl-button Identyfikuje etykietę jako przycisk ikony MDL; używany do rozwijanych pól wejściowych i jest wymagany w elemencie etykiety „zewnętrznego” elementu div. |
| 9 | mdl-js-button Ustawia podstawowe zachowanie kontenera ikon; używany do rozwijanych pól wejściowych i jest wymagany w elemencie etykiety „zewnętrznego” elementu div. |
| 10 | mdl-button--icon Identyfikuje etykietę jako kontener ikon MDL; używany do rozwijanych pól wejściowych i jest wymagany w elemencie etykiety „zewnętrznego” elementu div. |
| 11 | mdl-input__expandable-holder Identyfikuje kontener jako składnik MDL; używany do rozwijanych pól wejściowych i jest wymagany w „wewnętrznym” elemencie div. |
| 12 | is-invalid Identyfikuje pole tekstowe jako nieprawidłowe podczas początkowego ładowania i jest opcjonalne w elemencie mdl-textfield. |
Przykład
Poniższy przykład pomoże ci zrozumieć użycie klas mdl-textfield do pokazania różnych typów pól tekstowych.
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>Wynik
Sprawdź wynik.
MDL udostępnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych oraz wyświetlania różnych typów podpowiedzi. Poniższa tabela zawiera listę dostępnych klas i ich skutków.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | mdl-tooltip Identyfikuje kontener jako etykietkę narzędzia MDL i jest wymagany w elemencie kontenera etykietki. |
| 2 | mdl-tooltip--large Ustawia efekt dużej czcionki i jest opcjonalne; przechodzi do elementu kontenera podpowiedzi. |
Przykład
Poniższy przykład pomoże ci zrozumieć sposób użycia mdl-tooltip klasy, aby pokazać różne typy podpowiedzi.
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>Wynik
Sprawdź wynik.