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.