Materializuj - Szybki przewodnik
Materialize to biblioteka komponentów interfejsu użytkownika utworzona za pomocą CSS, JavaScript i HTML. Zmaterializuj składniki interfejsu użytkownika wielokrotnego użytku, które 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ść urządzenia i pełna gracji degradacja.
Niektóre z jego najważniejszych cech są następujące:
Wbudowane responsywne projektowanie.
Standardowy CSS o minimalnej powierzchni.
Nowe wersje typowych elementów sterujących interfejsu użytkownika, takich jak przyciski, pola wyboru i pola tekstowe, dostosowane do koncepcji Material Design.
Ulepszone i wyspecjalizowane funkcje, takie jak karty, karty, paski nawigacji, tosty i tak dalej.
Darmowy w użyciu i wymaga biblioteki JavaScript jQuery do prawidłowego działania.
Wiele przeglądarek i może być używany do tworzenia składników internetowych wielokrotnego użytku.
Elastyczny projekt
Materialise ma wbudowane responsywne projektowanie, dzięki czemu strona internetowa utworzona przy użyciu Materialise zostanie przeprojektowana zgodnie z wielkością urządzenia. Klasy Materialise są tworzone w taki sposób, aby serwis zmieścił się na dowolnym rozmiarze ekranu.
Strony internetowe tworzone przy użyciu Materialise są w pełni kompatybilne z komputerami PC, tabletami i urządzeniami mobilnymi.
Rozciągliwy
Materialise jest z założenia bardzo minimalistyczny i płaski. Został zaprojektowany z myślą o tym, ż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, jest całkowicie darmowy.
W tym rozdziale omówimy różne aspekty tworzenia przyjaznego środowiska dla Materializacji.
Wypróbuj opcję online
Stworzyliśmy środowisko Materialise Programming online, abyś mógł skompilować i wykonać wszystkie dostępne przykłady online. Daje ci pewność co do tego, co czytasz i umożliwia weryfikację programów za pomocą różnych opcji. Zapraszam do modyfikowania dowolnego przykładu i wykonywania go online.
Wypróbuj poniższy przykład, korzystając z naszego kompilatora online dostępnego w CodingGround
<!DOCTYPE html> <html> <head> <title>The Materialize Example</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> <script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> </script> </head> <body> <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div> </body> </html>W przypadku większości przykładów podanych w tym samouczku znajdziesz opcję Wypróbuj w naszych sekcjach kodu witryny w prawym górnym rogu, która przeniesie Cię do kompilatora online. Więc po prostu wykorzystaj to i ciesz się nauką.
Jak korzystać z Materialize?
Istnieją dwa sposoby korzystania z Materialise -
Local Installation - Możesz pobrać materialize.min.css i materialize.min.js pliki na komputerze lokalnym i dołącz je do kodu HTML.
CDN Based Version - Możesz dołączyć materialize.min.css i materialize.min.js pliki do kodu HTML bezpośrednio z sieci dostarczania treści (CDN).
Instalacja lokalna
Iść do http://materializecss.com/getting-started.html aby pobrać najnowszą dostępną wersję.
Następnie umieść pobrany plik materialize.min.js plik w katalogu Twojej witryny, np. / js i materialize.min.css w / css.
Przykład
Zawierać css i js w pliku HTML w następujący sposób.
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet" href = "/materialize/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "/materialize/materialize.min.js"></script>
</head>
<body>
<div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
</body>
</html>Spowoduje to następujący wynik.
Wersja oparta na CDN
Możesz dołączyć materialize.min.js i materialize.min.css pliki do kodu HTML bezpośrednio z sieci dostarczania treści (CDN). cdnjs.cloudflare.com zawiera zawartość najnowszej wersji.
Używamy wersji CDN cdnjs.cloudflare.com biblioteki w całym tym samouczku.
Przykład
Przepisz powyższy przykład używając materialize.min.css i materialize.min.js z CDN cdnjs.cloudflare.com.
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body>
<div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
</body>
</html>To da następujący wynik -
Materialize obsługuje bogaty zestaw klas kolorów. Te klasy kolorów są inspirowane i rozwijane z uwzględnieniem kolorów używanych w marketingu, znakach drogowych i karteczkach samoprzylepnych.
- red
- pink
- purple
- deep-purple
- indigo
- blue
- light-blue
- cyan
- teal
- green
- light-green
- lime
- yellow
- amber
- orange
- deep-orange
- brown
- grey
- blue-grey
- black
- white
- transparent
Stosowanie
Poniżej znajduje się lista klas jasności / ciemności, których można użyć do zmiany zastosowanego koloru.
- lighten-1
- lighten-2
- lighten-3
- lighten-4
- lighten-5
- darken-1
- darken-2
- darken-3
- darken-4
- accent-1
- accent-2
- accent-3
- accent-4
Przykład
Poniższy przykład demonstruje, jak używać powyższych klas do renderowania tła lub zmiany koloru tekstu. W przypadku tła dodaj klasy jako takie, aw przypadku tekstu, przyrostek „-tekst” do klasy koloru i przedrostek „tekst-” do klasy lightning.
materialize_colors.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Colors Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body>
<h2>Color Theme Demo</h2>
<hr/>
<div class = "card-panel">
<div class = "card-panel red lighten-2">
<h1>Red Colored Theme</h1>
</div>
<span class = "red-text text-darken-2">
<h2>Red Colored Text</h2>
</span>
<ul>
<li class = "red lighten-5"><p>Using red lighten-5</p></li>
<li class = "red lighten-4"><p>Using red lighten-4</p></li>
<li class = "red lighten-3"><p>Using red lighten-3</p></li>
<li class = "red lighten-2"><p>Using red lighten-2</p></li>
<li class = "red lighten-1"><p>Using red lighten-1</p></li>
<li class = "red"><p>Using red</p></li>
<li class = "red darken-1"><p>Using red darken-1</p></li>
<li class = "red darken-2"><p>Using red darken-2</p></li>
<li class = "red darken-3"><p>Using red darken-3</p></li>
<li class = "red darken-4"><p>Using red darken-4</p></li>
<li class = "red accent-1"><p>Using red accent-1</p></li>
<li class = "red accent-2"><p>Using red accent-2</p></li>
<li class = "red accent-3"><p>Using red accent-3</p></li>
<li class = "red accent-4"><p>Using red accent-4</p></li>
</ul>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialise zapewnia 12-kolumnową siatkę reagującą na płyn.
Używa klas stylu wierszy i kolumn do definiowania odpowiednio wierszy i kolumn.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | row Określa kontener bez wypełnienia, który ma być używany w responsywnych kolumnach. Ta klasa jest obowiązkowa, aby klasy responsywne były w pełni responsywne. |
| 2 | col Określa kolumnę z podklasami. |
col ma kilka podklas przeznaczonych dla różnych typów ekranów.
Kolumny dla małych urządzeń ekranowych
Poniżej znajduje się lista stylów kolumn dla urządzeń z małym ekranem, zazwyczaj smartfonów.
| Sr.No. | Nazwa i opis klasy | |
|---|---|---|
| 1 | s1 Definiuje 1 z 12 kolumn o szerokości 08,33%. |
|
| 2 | s2 Definiuje 2 z 12 kolumn o szerokości 16,66%. |
|
| 3 | s3 Definiuje 3 z 12 kolumn o szerokości 25,00%. |
|
| 4 | s4 Definiuje 4 z 12 kolumn o szerokości 33,33%. |
|
| s5 - s11 | ||
| 12 | s12 Definiuje 12 z 12 kolumn o szerokości 100%. Domyślna klasa dla telefonów z małymi ekranami. |
|
Kolumny dla urządzeń ze średnim ekranem
Poniżej znajduje się lista stylów na poziomie kolumn dla urządzeń ze średnim ekranem, zazwyczaj tabletów.
| Sr.No. | Nazwa i opis klasy | |
|---|---|---|
| 1 | m1 Definiuje 1 z 12 kolumn o szerokości 08,33% |
|
| 2 | m2 Definiuje 2 z 12 kolumn o szerokości 16,66%. |
|
| 3 | m3 Definiuje 3 z 12 kolumn o szerokości 25,00%. |
|
| 4 | m4 Definiuje 4 z 12 kolumn o szerokości 33,33%. |
|
| m5 - m11 | ||
| 12 | m12 Definiuje 12 z 12 kolumn o szerokości 100%. Domyślna klasa dla telefonów ze średnim ekranem. |
|
Kolumny do urządzeń z dużym ekranem
Poniżej znajduje się lista stylów na poziomie kolumn dla urządzeń z dużym ekranem, zazwyczaj laptopów.
| Sr.No. | Nazwa i opis klasy | |
|---|---|---|
| 1 | l1 Definiuje 1 z 12 kolumn o szerokości 08,33%. |
|
| 2 | l2 Definiuje 2 z 12 kolumn o szerokości 16,66%. |
|
| 3 | l3 Definiuje 3 z 12 kolumn o szerokości 25,00%. |
|
| 4 | l4 Definiuje 4 z 12 kolumn o szerokości 33,33%. |
|
| l5 - l11 | ||
| 12 | l12 Definiuje 12 z 12 kolumn o szerokości 100%. Domyślna klasa dla urządzeń z dużym ekranem. |
|
Stosowanie
Każda podklasa określa liczbę kolumn siatki, która ma być używana, na podstawie typu urządzenia. Rozważ następujący fragment kodu HTML.
<div class = "row">
<div class = "col s2 m4 l3">
<p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
a large screen.</p>
</div>
</div>Domyślnie używane kolumny to 12 na urządzeniu, jeśli podklasa nie jest wymieniona w atrybucie class elementu HTML.
Przykład
materialize_grids.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Grids Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body>
<div class = "teal">
<h2>Mobile First Design Demo</h2>
<p>Resize the window to see the effect!</p>
</div>
<hr/>
<div class = "row">
<div class = "col m1 grey center">1</div>
<div class = "col m1 center">2</div>
<div class = "col m1 grey center">3</div>
<div class = "col m1 center">4</div>
<div class = "col m1 grey center">5</div>
<div class = "col m1 center">6</div>
<div class = "col m1 center grey">7</div>
<div class = "col m1 center">8</div>
<div class = "col m1 center grey">9</div>
<div class = "col m1 center">10</div>
<div class = "col m1 center grey">11</div>
<div class = "col m1 center">12</div>
</div>
<div class = "row">
<div class = "col m4 l3 yellow">
<p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
and 3 on a large screen (l3).</p>
</div>
<div class = "col s4 m8 l9 grey">
<p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
(m8), and 9 on a large screen (l9).</p>
</div>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialise ma kilka klas użytkowych przydatnych w codziennych potrzebach projektowych.
Color utility classes - Na przykład .red, .green, .grey i tak dalej
Alignment utility classes - Na przykład .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right
Hiding Content utility classes as per device size - Na przykład .hide, .hideon-small-only, .hide-on-med-only, .hide-on-med-and-down, .hide-on-med-and-up oraz .hide-on- tylko duże
Formatting utility classes - Na przykład obcięcie, zawieszenie
Przykład
materialize_utilities.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family = Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h2>Materialize Utilities</h2>
<hr/>
<h3>Color Utilities Demo</h3>
<div class = "red">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.</p>
</div>
<div class = "green">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android
phones all have excellent support for HTML5.</p>
</div>
<h3>Alignment Utilities Demo</h3>
<div class = "card-panel valign-wrapper">
<p class = "valign">Vertically Aligned Text</p>
</div>
<div class = "card-panel">
<div><p class = "left-align">Left Aligned Text</p></div>
<div><p class = "right-align">Right Aligned Text</p></div>
<div><p class = "center-align">Center Aligned Text</p></div>
</div>
<h3>Hide Utilities Demo</h3>
<div class = "hide">
<p>Hidden on all devices</p>
</div>
<div class = "hide-on-small-only">
<p>Hidden on mobile devices</p>
</div>
<h3>Formatting Utilities Demo</h3>
<div class = "card-panel">
<p class = "truncate">The latest versions of Apple Safari, Google Chrome,
Mozilla Firefox, and Opera all support many HTML5 features and Internet
Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "card-panel hoverable">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and
Android phones all have excellent support for HTML5.</p>
</div>
<h3>Center Utility Demo</h3>
<div class = "card-panel center">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialise ma kilka klas do tworzenia obrazów i filmów w różnych rozmiarach.
responsive-img - Tworzy obraz, który sam zmienia rozmiar w zależności od rozmiaru ekranu.
video-container - Dla responsywnego kontenera z osadzonymi filmami.
responsive-video - Sprawia, że filmy HTML5 są responsywne.
Przykład
materialize_media.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h2>Materialize Media Examples</h2>
<hr/>
<h3>Images Demo</h3>
<div class = "card-panel">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "responsive-img">
</div>
<div class = "card-panel">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "circle responsive-img">
</div>
<h3>Responsive Embeded Video Demo</h3>
<div class = "video-container">
<iframe width = "540" height = "200"
src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
frameborder = "0" allowfullscreen></iframe>
</div>
<div class = "video-container">
<video width = "300" height = "200" controls autoplay>
<source src = "http://www.tutorialspoint.com/html5/foo.ogg" type = "video/ogg" />
<source src = "http://www.tutorialspoint.com/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the video element.
</video>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialise ma kilka specjalnych klas do wyświetlania pojemników jako kartek przypominających papier z cieniem.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | z-depth-0 Usuwa cień elementów mających domyślnie głębokość z. |
| 2 | z-depth-1 Stylizuje kontener dla dowolnej treści HTML z 1 pikselem obramowanym cieniem. Dodaje z-głębokość 1. |
| 3 | z-depth-2 Stylizuje kontener dla dowolnej treści HTML z 2 pikselami obramowanym cieniem. Dodaje z-głębokość 2. |
| 4 | z-depth-3 Stylizuje kontener dla dowolnej treści HTML z 3-pikselowym obramowaniem w cieniu. Dodaje głębokość z 3. |
| 5 | z-depth-4 Stylizuje kontener dla dowolnej zawartości HTML z 4-pikselowym obramowaniem w tle. Dodaje z-głębokość 4. |
| 6 | z-depth-5 Stylizuje kontener dla dowolnej zawartości HTML z 5-pikselowym obramowaniem w tle. Dodaje głębokość Z o wartości 5. |
Przykład
materialize_shadows.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<style>
div {
width : 200px;
height : 200px;
}
</style>
</head>
<body class = "container">
<h2>Materialize Shadow Examples</h2>
<hr/>
<div class = "card-panel">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-1">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-2">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-3">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-4">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-5">
<p><b>TODO:</b> Learn HTML5</p>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materializuj można używać do wyświetlania różnych typów tabel przy użyciu różnych stylów.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | None Reprezentuje podstawową tabelę bez obramowania. |
| 2 | stripped Wyświetla rozłożoną tabelę. |
| 3 | bordered Rysuje tabelę z obramowaniem między wierszami. |
| 4 | highlight Rysuje podświetloną tabelę. |
| 5 | centered Rysuje tabelę z wyśrodkowaniem całego tekstu w tabeli. |
| 6 | responsive-table Rysuje responsywną tabelę, aby pokazać poziomy pasek przewijania, jeśli ekran jest zbyt mały, aby wyświetlić zawartość. |
Przykład
materialize_tables.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<style>
div {
width : 200px;
height : 200px;
}
</style>
</head>
<body class = "container">
<h2>Tables Demo</h2>
<hr/>
<h3>Simple Table</h3>
<table>
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Stripped Table with borders</h3>
<table class = "striped bordered">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<hr/>
<h3>Centered Table</h3>
<table class = "centered">
<thead>
<tr><th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Responsive table</h3>
<table class = "responsive-table">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Data #1</th>
<th>Data #2</th>
<th>Data #3</th>
<th>Data #4</th>
<th>Data #5</th>
<th>Data #6</th>
<th>Data #7</th>
<th>Data #8</th>
<th>Data #9</th>
<th>Data #10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>Wynik
Sprawdź wynik.
Zmaterializuj zastosowania Roboto 2.0jako czcionka standardowa. Można go przesłonić przy użyciu następującego stylu CSS.
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}Poniżej znajdują się przykłady nagłówków, cytatów blokowych i tekstu swobodnego, ale responsywnego.
Przykład
materialize_typography.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Typography Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h2>Typography Demo</h2>
<hr/>
<h3>Headings</h3>
<div class = "card-panel">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<h3>Block Quotes</h3>
<div class = "card-panel">
<blockquote>
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.
</blockquote>
</div>
<h3>Responsive free-flow text</h3>
<div class = "card-panel">
<p class = "flow-text">
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.
</p>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materializuj odznakę to powiadomienie na ekranie, które może być liczbą lub ikoną. Zwykle jest używany do podkreślenia liczby elementów.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | badge Identyfikuje element jako komponent identyfikatora MDL. Wymagane dla elementu span. |
| 2 | new Dodaje „nową” klasę do składnika identyfikatora, nadaje mu tło. |
Poniżej znajdują się przykłady wykorzystania odznak na różne sposoby.
Przykład
materialize_badges.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Badges Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h2>Badges Demo</h2>
<hr/>
<h3>Badges in List</h3>
<div class = "collection">
<a href = "#" class = "collection-item">Inbox<span class = "badge">12</span></a>
<a href = "#" class = "collection-item">Unread<span class = "new badge">4</span></a>
<a href = "#" class = "collection-item">Sent</a>
<a href = "#" class = "collection-item">Outbox<span class = "badge">14</span></a>
</div>
<h3>Badges in dropdowns</h3>
<ul id = "dropdown" class = "dropdown-content">
<li><a href = "#">Inbox<span class = "badge">12</span></a></li>
<li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
<li><a href = "#">Sent</a></li>
<li><a href = "#">Outbox<span class = "badge">14</span></a></li>
</ul>
<a class = "btn dropdown-button" href = "#" data-activates = "dropdown">
Dropdown<i class = "mdi-navigation-arrow-drop-down right"></i></a>
<h3>Badges in Navigation</h3>
<nav>
<div class = "nav-wrapper">
<a href = "" class = "brand-logo">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<li><a href = "">Inbox</a></li>
<li><a href = "">Unread<span class = "new badge">4</span></a></li>
<li><a href = "#">Sent</a></li>
<li><a href = "#">Outbox</a></li>
</ul>
</div>
</nav>
</body>
</html>Wynik
Sprawdź wynik.
Materialise zapewnia różne klasy CSS, które umożliwiają zastosowanie różnych wstępnie zdefiniowanych ulepszeń wizualnych i behawioralnych do przycisków. Poniższa tabela wymienia dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | btn Ustawia przycisk lub kotwicę jako przycisk Zmaterializuj, wymagany. Ustawia podniesiony efekt wyświetlania do przycisku. |
| 2 | btn-floating Tworzy okrągły przycisk. |
| 3 | btn-flat Ustawia płaski efekt wyświetlania przycisku, domyślnie. |
| 4 | btn-large Tworzy duże przyciski. |
| 5 | disabled Tworzy wyłączony przycisk. |
| 6 | type = "submit" Reprezentuje kotwicę lub przycisk jako przycisk główny. |
| 7 | waves-effect Ustawia efekt kliknięcia tętniącego, może być używany w połączeniu z innymi klasami. |
Przykład
Poniższy przykład ilustruje użycie klas mdl-button do wyświetlania różnych typów przycisków.
materialize_buttons.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Buttons Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "card-panel">
<h5>Raised Buttons</h5>
<button class = "btn waves-effect waves-teal">Add</button></td>
<button class = "btn waves-effect waves-teal">
<i class = "material-icons left">add</i>Add</button></td>
<button class = "btn waves-effect waves-teal">
<i class = "material-icons right">add</i>Add</button></td>
<button class = "btn waves-effect waves-teal disabled">Add</button></td>
</div>
<div class = "card-panel">
<h5>Flat Buttons</h5>
<button class = "btn-flat waves-effect waves-teal">Add</button></td>
<button class = "btn-flat waves-effect waves-teal disabled" >
<i class = "material-icons left">add</i>Add</button></td>
</div>
<div class = "card-panel">
<h5>Floating Buttons</h5>
<a class = "btn-floating waves-effect waves-light red">
<i class = "material-icons">add</i></a>
<a class = "btn-floating waves-effect waves-light red disabled" >
<i class = "material-icons">add</i></a>
</div>
<div class = "card-panel">
<h5>Primary Buttons</h5>
<button class = "btn waves-effect waves-light red" type = "submit">Send
<i class = "material-icons right">send</i></button>
<button class = "btn waves-effect waves-light red disabled" type = "submit" >Cancel
<i class = "material-icons right">cancel</i></button>
</div>
<div class = "card-panel">
<h5>Large Buttons</h5>
<a class = "btn-floating btn-large waves-effect waves-light red">
<i class = "material-icons">add</i></a>
<a class = "btn-floating btn-large waves-effect waves-light red disabled">
<i class = "material-icons">add</i></a>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialize udostępnia różne klasy CSS, aby w łatwy sposób stworzyć ładny okruch. W poniższej tabeli wymieniono dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | nav-wrapper Ustawia komponent nawigacyjny jako otokę paska nawigacyjnego / nawigacyjnego. |
| 2 | breadcrumb Ustawia element zakotwiczenia jako menu nawigacyjne. Ostatni element zakotwiczenia jest aktywny, podczas gdy reszta jest wyszarzona. |
Przykład
Poniższy przykład ilustruje użycie klas breadcrumb do zaprezentowania paska nawigacji.
materialize_breadcrumb.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize BreadCrumb Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<nav>
<div class = "nav-wrapper">
<div class = "col s12">
<a href = "#" class = "breadcrumb">Home</a>
<a href = "#" class = "breadcrumb">Technology</a>
<a href = "#" class = "breadcrumb">HTML5</a>
</div>
</div>
</nav>
</body>
</html>Wynik
Sprawdź wynik.
Materialise zapewnia różne klasy CSS, które umożliwiają stosowanie różnych predefiniowanych ulepszeń wizualnych i behawioralnych w celu wyświetlania różnych typów kart. Poniższa tabela wymienia dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | card Identyfikuje element div jako kontener karty Materialise. Wymagane w przypadku „zewnętrznego” elementu DIV. |
| 2 | card-content Identyfikuje element div jako kontener zawartości karty i jest wymagany w „wewnętrznym” elemencie div. |
| 3 | card-title Identyfikuje element div jako kontener tytułu karty i jest wymagany w „wewnętrznym” elemencie div tytułu. |
| 4 | card-action Identyfikuje div jako kontener działań na karcie i przypisuje odpowiednie właściwości tekstowe do tekstu akcji. Wymagane dla "wewnętrznych" akcji div; treść trafia bezpośrednio do elementu DIV bez pośredniczących kontenerów. |
| 5 | card-image Identyfikuje element div jako kontener obrazu karty i jest wymagany w „wewnętrznym” elemencie div. |
| 6 | card-reveal Identyfikuje element DIV jako ujawniony kontener tekstu. |
| 7 | activator Identyfikuje element DIV jako ujawniony kontener tekstu i obraz do ujawnienia. Służy do wyświetlania informacji kontekstowych związanych z obrazem. |
| 8 | card-panel Identyfikuje element DIV jako prostą kartę z cieniami i dopełnieniem. |
| 9 | card-small Identyfikuje DIV jako małą kartę. Wysokość: 300 pikseli; |
| 10 | card-medium Identyfikuje DIV jako kartę średniej wielkości. Wysokość: 400px; |
| 11 | card-large Identyfikuje div jako kartę o dużym rozmiarze. Wysokość: 500 pikseli; |
Przykład
Poniższy przykład ilustruje użycie klas kart do prezentacji różnych typów kart.
materialize_cards.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Cards Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "row">
<div class = "col s12 m6">
<div class = "card blue-grey lighten-4">
<div class = "card-content">
<span class = "card-title"><h3>Learn HTML5</h3></span>
<p>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.</p>
</div>
<div class = "card-action">
<button class = "btn waves-effect waves-light blue-grey">
<i class = "material-icons">share</i></button>
<a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
www.tutorialspoint.com</a>
</div>
</div>
</div>
<div class = "col s12 m6">
<div class = "card blue-grey lighten-4">
<div class = "card-image">
<img src = "html5-mini-logo.jpg">
</div>
<div class = "card-content">
<p>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.</p>
</div>
<div class = "card-action">
<button class = "btn waves-effect waves-light blue-grey">
<i class = "material-icons">share</i></button>
<a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
www.tutorialspoint.com</a>
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col s12 m6">
<div class = "card blue-grey lighten-4">
<div class = "card-image waves-effect waves-block waves-light">
<img class = "activator" src = "html5-mini-logo.jpg">
</div>
<div class = "card-content activator">
<p>Click the image to reveal more information.</p>
</div>
<div class = "card-reveal">
<span class = "card-title grey-text text-darken-4">HTML5
<i class = "material-icons right">close</i></span>
<p>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.</p>
</div>
<div class = "card-action">
<button class = "btn waves-effect waves-light blue-grey">
<i class = "material-icons">share</i></button>
<a class = "right blue-grey-text" href = "http://www.tutorialspoint.com">
www.tutorialspoint.com</a>
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col s12 m3">
<div class = "card-panel teal">
<span class = "white-text">Simple Card</span>
</div>
</div>
<div class = "col s12 m3">
<div class = "card small teal">
<span class = "white-text">Small Card</span>
</div>
</div>
<div class = "col s12 m3">
<div class = "card medium teal">
<span class = "white-text">Medium Card</span>
</div>
</div>
<div class = "col s12 m3">
<div class = "card large teal">
<span class = "white-text">Large Card</span>
</div>
</div>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialise zapewnia specjalny komponent o nazwie Chip, który może służyć do reprezentowania niewielkiego zestawu informacji. Na przykład kontakt, tagi itp.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | chip Ustaw kontener div jako chip. |
Przykład
Poniższy przykład demonstruje użycie klasy chip do zaprezentowania tworzenia różnych typów tagów.
materialize_chips.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Chips Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "chip">
<img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg">HTML 5
</div>
<div class = "chip">
HTML 5<i class = "material-icons">close</i>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialize udostępnia specjalne klasy do reprezentowania różnych typów kolekcji, gdzie kolekcja reprezentuje grupę powiązanych elementów informacji.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | collection Ustawia kontener div lub ul jako kolekcję. |
| 2 | collection-item Ustawia element a lub li jako element kolekcji. |
| 3 | active Pokazuje element a lub li jako aktywny element kolekcji. |
| 4 | with-header Oznacza kolekcję, aby miała nagłówek. |
| 5 | collection-header Ustawia element a lub li jako nagłówek kolekcji. |
| 6 | avatar Ustawia element a lub li jako element awatara. |
| 7 | dismissible Umożliwia odsunięcie elementów kolekcji. Działa tylko na urządzeniach z ekranem dotykowym. |
Przykład
Poniższy przykład demonstruje użycie klas kolekcji do zaprezentowania tworzenia różnych typów kolekcji.
materialize_collections.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Collections Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h3>Simple Collection</h3><hr/>
<ul class = "collection">
<li class = "collection-item">HTML 5</li>
<li class = "collection-item">JQuery</li>
<li class = "collection-item">JavaScript</li>
<li class = "collection-item">CSS</li>
</ul>
<h3>Collection of Links</h3><hr/>
<div class = "collection">
<a href = "#" class = "collection-item">HTML 5</a>
<a href = "#!" class = "collection-item active">JQuery</a>
<a href = "#!" class = "collection-item">JavaScript</a>
<a href = "#!" class = "collection-item">CSS</a>
</div>
<h3>Collection with Header</h3><hr/>
<ul class = "collection with-header">
<li class = "collection-header"><h3>Front End Technologies</h3></li>
<li class = "collection-item">HTML 5</li>
<li class = "collection-item">JQuery</li>
<li class = "collection-item">JavaScript</li>
<li class = "collection-item">CSS</li>
</ul>
<h3>Collection with Secondary Content</h3><hr/>
<ul class = "collection">
<li class = "collection-item">
<div>HTML 5<a href = "#!" class = "secondary-content">
<i class = "material-icons">cloud</i></a></div></li>
<li class = "collection-item">
<div>JQuery<a href = "#!" class = "secondary-content">
<i class = "material-icons">cloud</i></a></div></li>
<li class = "collection-item">
<div>JavaScript<a href = "#!" class = "secondary-content">
<i class = "material-icons">cloud</i></a></div></li>
<li class = "collection-item">
<div>CSS<a href = "#!" class = "secondary-content">
<i class = "material-icons">cloud</i></a></div></li>
</ul>
<h3>Collection with Avatar</h3><hr/>
<ul class = "collection">
<li class = "collection-item avatar">
<img alt = "HTML5" src = "/html5/images/html5-mini-logo.jpg" class = "circle">
<span class = "title">HTML5</span>
<p>HTML5 is the next major revision of the HTML standard superseding
HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for
structuring and presenting content on the World Wide Web.</p>
<a href = "#!" class = "secondary-content"><i class = "material-icons">
grade</i></a>
</li>
<li class = "collection-item avatar">
<i class = "material-icons circle green">insert_chart</i>
<span class = "title">HighCharts</span>
<p></p>
<a href = "#!" class = "secondary-content"><i class = "material-icons">
grade</i></a>
</li>
</ul>
<h3>Collection with dismissible content</h3><hr/>
<ul class = "collection">
<li class = "collection-item dismissable">HTML 5</li>
<li class = "collection-item dismissable">JQuery</li>
<li class = "collection-item dismissable">JavaScript</li>
<li class = "collection-item dismissable">CSS</li>
</ul>
</body>
</html>Wynik
Sprawdź wynik.
Materialize udostępnia specjalne klasy reprezentujące różne typy kolekcji, w których kolekcja reprezentuje grupę powiązanych elementów informacji.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | page-footer Ustawia kontener div jako stopkę. |
| 2 | footer-copyright Ustawia kontener div jako kontener chroniony prawami autorskimi stopki. |
Przykład
Poniższy przykład demonstruje użycie klas stopki do zaprezentowania przykładowej stopki.
materialize_footer.htm
<html>
<head>
<title>The Materialize Collections Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<footer class = "page-footer">
<div class = "row">
<div class = "col s12 m6 l6">
<h5 class = "white-text">Footer Content</h5>
</div>
<div class = "col">
<ul>
<li><a href = "#" class = "grey-text text-lighten-4 right">
Help</a></li>
<li><a href = "#" class = "grey-text text-lighten-4 right">
Privacy and Terms</a></li>
<li><a href = "#" class = "grey-text text-lighten-4 right">
User Agreement</a></li>
</ul>
</div>
</div>
<div class = "footer-copyright">
<div class = "container">
© 2016 Copyright Information
<a class = "grey-text text-lighten-4 right" href = "#!">Links</a>
</div>
</div>
</footer>
</body>
</html>Wynik
Sprawdź wynik.
Materialise ma bardzo piękny i responsywny CSS do projektowania formularzy. Używane są następujące CSS -
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | input-field Ustawia kontener div jako kontener pola wejściowego. Wymagany. |
| 2 | validate Dodaje style walidacji do pola wejściowego. |
| 3 | active Pokazuje wejście z aktywnym stylem. |
| 4 | materialize-textarea Służy do stylizacji obszaru tekstowego. Obszary tekstowe automatycznie zmienią rozmiar na tekst w środku. |
| 5 | filled-in Pokazuje pole wyboru ze stylem wypełnionego pola. |
Przykład
Poniższy przykład demonstruje użycie klas wejściowych do zaprezentowania przykładowego formularza.
materialize_forms.htm
<html>
<head>
<title>The Materialize Form Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "row">
<form class = "col s12">
<div class = "row">
<div class = "input-field col s6">
<i class = "material-icons prefix">account_circle</i>
<input placeholder = "Username" value = "Mahesh" id = "name"
type = "text" class = "active validate" required />
<label for = "name">Username</label>
</div>
<div class = "input-field col s6">
<label for = "password">Password</label>
<input id = "password" type = "password" placeholder = "Password"
class = "validate" required />
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<input placeholder = "Email" id = "email" type = "email"
class = "validate">
<label for = "email">Email</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<i class = "material-icons prefix">mode_edit</i>
<textarea id = "address" class = "materialize-textarea"></textarea>
<label for = "address">Address</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<input placeholder = "Comments (Disabled)" id = "comments"
type = "text" disabled />
<label for = "comments">Comments</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<p>
<input id = "married" type = "checkbox" checked = "checked" />
<label for = "married">Married</label>
</p>
<p>
<input id = "single" type = "checkbox" class = "filled-in" />
<label for = "single">Single</label>
</p>
<p>
<input id = "dontknow" type = "checkbox" disabled = "disabled" />
<label for = "dontknow">Don't know (Disabled)</label>
</p>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<p>
<input id = "male" type = "radio" name = "gender"
value = "male" checked />
<label for = "male">Male</label>
</p>
<p>
<input id = "female" type = "radio" name = "gender"
value = "female" checked />
<label for = "female">Female</label>
</p>
<p>
<input id = "dontknow1" type = "radio" name = "gender"
value = "female" disabled />
<label for = "dontknow1">Don't know (Disabled)</label>
</p>
</div>
</div>
</form>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Ważne sterowanie wejściami
Materialize zapewnia CSS dla wielu typów kontrolek wejściowych. Poniższa tabela przedstawia to samo.
| Sr.No. | Nazwa i opis typu danych wejściowych |
|---|---|
| 1 | Wybierz Różne typy wybranych wejść |
| 2 | Przełączniki Różne typy przełączników |
| 3 | Plik Różne typy plików wejściowych |
| 4 | Zasięg Różne typy wejść zakresowych |
| 5 | Date Picker Date Picker |
| 6 | Licznik postaci Licznik postaci |
Materialise obsługuje następujące popularne biblioteki ikon -
- Niesamowite ikony czcionek
- Ikony materiałów Google
- Ikony Bootstrap
Stosowanie
Aby użyć ikony, umieść nazwę ikony w klasie elementu HTML <i>. Aby kontrolować rozmiar ikony, możesz użyć następujących klas -
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | tiny Rysuje ikonę o bardzo małym rozmiarze. 1rem. |
| 2 | small Rysuje ikonę o małym rozmiarze. 2rem. |
| 3 | medium Rysuje ikonę średniej wielkości. 4rem. |
| 4 | large Rysuje ikonę o dużym rozmiarze. 6rem. |
Przykład
materialize_icons.htm
<html>
<head>
<title>The Materialize Icons Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body class = "container">
<h2>Icons Demo</h2>
<hr/>
<h3>Font Awesome Icon Demo</h3>
<i class = "fa fa-cloud tiny"></i>
<i class = "fa fa-cloud"></i>
<i class = "fa fa-cloud small"></i>
<i class = "fa fa-cloud medium"></i>
<i class = "fa fa-cloud large"></i>
<h3>Google Material Design Icon Demo</h3>
<i class = "material-icons tiny">cloud</i>
<i class = "material-icons small">cloud</i>
<i class = "material-icons">cloud</i>
<i class = "material-icons medium">cloud</i>
<i class = "material-icons large">cloud</i>
<h3>Bootstrap Icon Demo</h3>
<i class = "glyphicon glyphicon-cloud tiny"></i>
<i class = "glyphicon glyphicon-cloud"></i>
<i class = "glyphicon glyphicon-cloud small"></i>
<i class = "glyphicon glyphicon-cloud medium"></i>
<i class = "glyphicon glyphicon-cloud large"></i>
</body>
</html>Wynik
Sprawdź wynik.
Materialize udostępnia różne klasy CSS, aby w łatwy sposób stworzyć ładny pasek nawigacji. W poniższej tabeli wymieniono dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | nav-wrapper Ustawia komponent nawigacyjny jako opakowanie paska nawigacyjnego / menu nawigacyjnego. |
| 2 | brand-logo Ustawia element kotwicy jako główne logo. |
| 3 | nav-mobile Ustawia element ul jako pasek nawigacji. |
Przykład
Poniższy przykład demonstruje użycie klas navbar do zaprezentowania różnych pasków nawigacyjnych.
materialize_navbar.htm
<html>
<head>
<title>The Materialize NavBar Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script>
$( document ).ready(function()) { $(".dropdown-button").dropdown();
});
</script>
</head>
<body class = "container">
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12" >
<h5>Right Aligned Nav Bar</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<li><a href = "#">HTML5</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Left Aligned Nav Bar</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo right">TutorialsPoint</a>
<ul id = "nav-mobile" class = "left hide-on-med-and-down">
<li><a href = "#">HTML5</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Center Aligned Nav Bar</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo center">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<li><a href = "#">Java</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Nav Bar with Active link</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo right">TutorialsPoint</a>
<ul id = "nav-mobile" class = "left hide-on-med-and-down">
<li><a href = "#">HTML5</a></li>
<li><a href = "#">CSS</a></li>
<li class = "active"><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Nav Bar with dropdown menu</h5>
<ul id = "javaDropDown" class = "dropdown-content">
<li><a href = "#!">JSF</a></li>
<li><a href = "#!">JSP</a></li>
<li class = "divider"></li>
<li><a href = "#!">Servlets</a></li>
</ul>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo center">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<!-- Dropdown Trigger -->
<li><a class = "dropdown-button" href = "#!"
data-activates = "javaDropDown">Java<i class = "material-icons
right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Nav Bar with Links and Icons</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo right">TutorialsPoint</a>
<ul id = "nav-mobile" class = "left hide-on-med-and-down">
<li><a href = "#"><i class = "material-icons left">search</i>
HTML5</a></li>
<li><a href = "#"><i class = "material-icons right">view_module</i>
CSS</a></li>
<li><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialize udostępnia różne klasy CSS, aby w łatwy sposób stworzyć ładny pasek paginacji. W poniższej tabeli wymieniono dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | pagination Ustawia element ul jako komponent paginacji. |
Przykład
Poniższy przykład ilustruje użycie klas navbar do zaprezentowania paska paginacji.
materialize_pagination.htm
<html>
<head>
<title>The Materialize Pagination Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12" >
<h5>Materialize Pagination</h5>
<ul class = "pagination">
<li class = "disabled"><a href = "#!">
<i class = "material-icons">chevron_left</i></a></li>
<li class = "active"><a href = "#!">1</a></li>
<li class = "waves-effect"><a href = "#!">2</a></li>
<li class = "waves-effect"><a href = "#!">3</a></li>
<li class = "waves-effect"><a href = "#!">4</a></li>
<li class = "waves-effect"><a href = "#!">5</a></li>
<li class = "waves-effect"><a href = "#!">
<i class = "material-icons">chevron_right</i></a></li>
</ul>
</div>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialize udostępnia różne klasy CSS, które umożliwiają zastosowanie różnych predefiniowanych ulepszeń wizualnych i behawioralnych w celu wyświetlenia różnych typów programów do ładowania wstępnego lub pasków postępu. W poniższej tabeli wymieniono dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | progress Identyfikuje element jako składnik postępu. Wymagane dla elementu DIV. |
| 2 | determinate Ustawia podstawowe zachowanie Materializuj na wskaźnik postępu. |
| 3 | indeterminate Ustawia animację na wskaźnik postępu. |
Przykład
Poniżej znajduje się przykład wykorzystania modułów wstępnego ładowania na różne sposoby.
materialize_preloader.htm
<html>
<head>
<title>The Materialize Preloader Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h4>Default Preloader</h4>
<div class = "progress">
<div class = "determinate" style = "width: 50%"></div>
</div>
<h4>Indeterminate Preloader</h4>
<div class = "progress">
<div class = "indeterminate"></div>
</div>
<h4>Circular Preloader</h4>
<div class = "preloader-wrapper big active">
<div class = "spinner-layer spinner-blue-only">
<div class = "circle-clipper left">
<div class = "circle"></div>
</div>
<div class = "gap-patch">
<div class = "circle"></div>
</div>
<div class = "circle-clipper right">
<div class = "circle"></div>
</div>
</div>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialize udostępnia różne klasy CSS, które umożliwiają stosowanie różnych predefiniowanych ulepszeń wizualnych i behawioralnych w celu wyświetlania różnych typów akordeonów. W poniższej tabeli wymieniono dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | collapsible Identyfikuje element jako zmaterializowany składany komponent. Wymagane dla elementu ul. |
| 2 | collapsible-header Ustawia div jako nagłówek sekcji. |
| 3 | collapsible-body Ustawia element div jako kontener zawartości sekcji. |
| 4 | popout Tworzy wyskakujące okienko zwijane. |
| 5 | active Otwiera sekcję. |
| 6 | expandable Oznacza składany komponent jako rozwijany. |
| 7 | accordion Oznacza składany komponent jako akordeon. |
Poniżej znajduje się przykład wykorzystania akordeonów na różne sposoby.
Przykład
materialize_collapsible.htm
<html>
<head>
<title>The Materialize Collapsible Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h4>Simple Accordion</h4>
<ul class = "collapsible" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Popout Accordion</h4>
<ul class = "collapsible popout" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Accordion with Preselected Section</h4>
<ul class = "collapsible" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header active">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Expandables</h4>
<ul class = "collapsible" data-collapsible = "expandable">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
</body>
</html>Wynik
Sprawdź wynik.
Materialise zapewnia różne specjalne metody wyświetlania dyskretnych alertów użytkownikom. Materialise zapewnia za nich termin toast. Poniżej znajduje się składnia pokazująca okno dialogowe jako toast.
Materialize.toast(message, displayLength, className, completeCallback);Gdzie,
message - Wiadomość do wyświetlenia użytkownikowi.
displayLength - Czas trwania komunikatu, po którym zniknie.
className- Klasa stylu, która ma być zastosowana do toastu. Na przykład „zaokrąglony”.
completeCallback - Metoda wywołania zwrotnego po odrzuceniu toastu.
Jako podpowiedź Materialise udostępnia następujące klasy CSS.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | tooltipped Identyfikuje komponent, który ma mieć podpowiedź. |
| 2 | data-position Pozycja podpowiedzi; dół, góra, lewo lub prawo. |
| 3 | data-delay Ustawia czas trwania podpowiedzi, po którym zniknie. |
| 4 | data-tooltip Ustawia zawartość podpowiedzi. |
Przykład
Poniższy przykład demonstruje użycie tostów i podpowiedzi.
materialize_dialogs.htm
<html>
<head>
<title>The Materialize Dialogs Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script>
function showToast(message, duration) {
Materialize.toast(message, duration);
}
function showToast1(message, duration) {
Materialize.toast('<i>'+ message + '</i>', duration);
}
function showToast2(message, duration) {
Materialize.toast(message, duration, 'rounded');
}
function showToast3(message, duration) {
Materialize.toast('Hello World!', duration, '', function toastCompleted() {
alert('Toast dismissed!');
});
}
</script>
</head>
<body class = "container">
<h4>Toasts</h4>
<a class = "btn" onclick = "showToast('Hello World!', 3000)">Normal Alert!</a>
<a class = "btn" onclick = "showToast1('Hello World!', 3000)">Italic Alert!</a>
<a class = "btn" onclick = "showToast2('Hello World!', 3000)">Rounded Alert!</a>
<br/><br/>
<a class = "btn" onclick = "showToast3('Hello World!', 3000)">Callback Alert!</a>
<h4>Tooltips</h4>
<a class = "btn tooltipped" data-position = "bottom" data-delay = "50"
data-tooltip = "I am in bottom!">Bottom</a>
<a class = "btn tooltipped" data-position = "left" data-delay = "50"
data-tooltip = "I am in left!">Left</a>
<a class = "btn tooltipped" data-position = "right" data-delay = "50"
data-tooltip = "I am in right!">Right</a>
<a class = "btn tooltipped" data-position = "top" data-delay = "50"
data-tooltip = "I am in top!">Top</a>
</body>
</html>Wynik
Sprawdź wynik.
Materialize udostępnia rozwijaną klasę CSS, która tworzy element ul jako listę rozwijaną i dodaje identyfikator elementu ul do atrybutu data-activates przycisku lub elementu kotwicy. W poniższej tabeli wymieniono dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | dropdown-content Identyfikuje ul jako element listy rozwijanej materializacji. Wymagane dla elementu ul. |
| 2 | data-activates identyfikator rozwijanego elementu ul. |
Przykład
Poniżej znajduje się przykład użycia listy rozwijanej.
materialize_dropdowns.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Dropdowns Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h3>Drop Down Demo</h3>
<ul id = "dropdown" class = "dropdown-content">
<li><a href = "#">Inbox<span class = "badge">12</span></a></li>
<li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
<li><a href = "#">Sent</a></li>
<li class = "divider"></li>
<li><a href = "#">Outbox<span class = "badge">14</span></a></li>
</ul>
<a class = "btn dropdown-button" href = "#" data-activates = "dropdown">Mail Box
<i class = "mdi-navigation-arrow-drop-down right"></i></a>
</body>
</html>Wynik
Sprawdź wynik.
Materialise zapewnia klasę CSS zakładek, aby utworzyć plik ulelement jako zakładka. W poniższej tabeli wymieniono dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | tabs Identyfikuje ul jako komponent zakładki materializuj. Wymagane dla elementu ul. |
| 2 | active Uaktywnia kartę. |
Przykład
Poniżej znajduje się przykład użycia karty.
materialize_tabs.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Tabs Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h3>Tabs Demo</h3>
<div class = "row">
<div class = "col s12">
<ul class = "tabs">
<li class = "tab col s3"><a href = "#inbox">Inbox</a></li>
<li class = "tab col s3"><a class = "active" href = "#unread">
Unread</a></li>
<li class = "tab col s3 disabled"><a href = "#outbox">
Outbox (Disabled)</a></li>
<li class = "tab col s3"><a href = "#sent">Sent</a></li>
</ul>
</div>
<div id = "inbox" class = "col s12">Inbox</div>
<div id = "unread" class = "col s12">Unread</div>
<div id = "outbox" class = "col s12">Outbox (Disabled)</div>
<div id = "sent" class = "col s12">Sent</div>
</div>
</body>
</html>Wynik
Sprawdź wynik.
Materialise używa Waves, zewnętrznej biblioteki, do tworzenia efektu atramentu opisanego w Material Design. Poniższa tabela wymienia dostępne klasy i ich efekty.
| Sr.No. | Nazwa i opis klasy |
|---|---|
| 1 | waves-effect Stosuje efekt fali do kontrolki. |
| 2 | waves-light Stosuje efekt fali w kolorze białym. |
| 3 | waves-red Stosuje efekt fali w kolorze czerwonym. |
| 4 | waves-green Stosuje efekt fali w kolorze zielonym. |
| 5 | waves-yellow Nakłada efekt fali w kolorze żółtym. |
| 6 | waves-orange Stosuje efekt fali w kolorze pomarańczowym. |
| 7 | waves-purple Stosuje efekt fali w kolorze fioletowym. |
| 8 | waves-teal Stosuje efekt fali w kolorze morskim. |
Przykład
Poniżej znajduje się przykład użycia efektów fal na przyciskach.
materialize_waves.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Waves Effects Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body class = "container">
<h3>Waves Effects Demo</h3>
<div class = "collection waves-color-demo">
<div class = "collection-item">
<code class = " language-markup">Default</code>
<a href = "#!" class = "waves-effect btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-light</code>
<a href = "#!" class = "waves-effect waves-light btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-red</code>
<a href = "#!" class = "waves-effect waves-red btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-yellow</code>
<a href = "#!" class = "waves-effect waves-yellow btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-orange</code>
<a href = "#!" class = "waves-effect waves-orange btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-purple</code>
<a href = "#!" class = "waves-effect waves-purple btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-green</code>
<a href = "#!" class = "waves-effect waves-green btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-teal</code>
<a href = "#!" class = "waves-effect waves-teal btn secondary-content">
Click Me!</a>
</div>
</div>
</body>
</html>Wynik
Sprawdź wynik.