Materialise - Hızlı Kılavuz

Materialize, CSS, JavaScript ve HTML ile oluşturulmuş bir UI bileşen kitaplığıdır. Yeniden kullanılabilir UI bileşenlerini somutlaştırmak, çekici, tutarlı ve işlevsel web sayfaları ve web uygulamaları oluşturmaya yardımcı olurken, aynı zamanda tarayıcı taşınabilirliği, cihaz bağımsızlığı ve zarif bozulma gibi modern web tasarım ilkelerine bağlı kalmaya yardımcı olur.

Göze çarpan özelliklerinden bazıları aşağıdaki gibidir -

  • Yerleşik duyarlı tasarım.

  • Minimum ayak izine sahip standart CSS.

  • Materyal Tasarım kavramlarını takip edecek şekilde uyarlanmış düğmeler, onay kutuları ve metin alanları gibi yaygın kullanıcı arayüzü kontrollerinin yeni sürümleri

  • Kartlar, sekmeler, gezinme çubukları, tostlar gibi gelişmiş ve özelleştirilmiş özellikler.

  • Kullanımı ücretsizdir ve düzgün çalışması için jQuery JavaScript kitaplığı gerektirir.

  • Çapraz tarayıcı ve yeniden kullanılabilir web bileşenleri oluşturmak için kullanılabilir.

Sorumlu tasarım

Materialise, yerleşik duyarlı tasarıma sahiptir, böylece Materialize kullanılarak oluşturulan web sitesi, cihaz boyutuna göre kendini yeniden tasarlar. Materialise sınıfları, web sitesinin herhangi bir ekran boyutuna sığabileceği şekilde oluşturulur.

Materialize kullanılarak oluşturulan web siteleri PC, tabletler ve mobil cihazlarla tamamen uyumludur.

Genişletilebilir

Materyalleştirmek, tasarım gereği çok minimal ve düzdür. Yeni CSS kuralları eklemenin, mevcut CSS kurallarının üzerine yazmaktan çok daha kolay olduğu gerçeği düşünülerek tasarlanmıştır. Gölgeleri ve koyu renkleri destekler. Renkler ve gölgeler, çeşitli platformlarda ve cihazlarda aynı kalır.

Ve en önemlisi, kullanımı tamamen ücretsizdir.

Bu bölümde, Materialise için uygun bir ortam oluşturmanın farklı yönlerini tartışacağız.

Çevrimiçi Seçeneği Deneyin

Materyalize Programlama ortamını çevrimiçi olarak kurduk, böylece mevcut tüm örnekleri çevrimiçi olarak derleyip çalıştırabilirsiniz. Okuduğunuz şey konusunda size güven verir ve programları farklı seçeneklerle doğrulamanızı sağlar. Herhangi bir örneği değiştirmekten ve çevrimiçi yürütmekten çekinmeyin.

CodingGround'da bulunan çevrimiçi derleyicimizi kullanarak aşağıdaki örneği deneyin

<!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>

Bu eğitimde verilen örneklerin çoğu için, sizi çevrimiçi derleyiciye götürecek sağ üst köşedeki web sitesi kodu bölümlerimizde bir Deneyin seçeneğini bulacaksınız. Bu yüzden sadece onu kullanın ve öğrenmenin tadını çıkarın.

Materialize Nasıl Kullanılır?

Materialize'ı kullanmanın iki yolu vardır -

Local Installation - İndirebilirsiniz materialize.min.css ve materialize.min.js yerel makinenizdeki dosyaları ve bunu HTML kodunuza ekleyin.

CDN Based Version - Dahil edebilirsiniz materialize.min.css ve materialize.min.js dosyaları doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza aktarın.

Yerel Kurulum

  • Git http://materializecss.com/getting-started.html mevcut en son sürümü indirmek için.

  • Ardından, indirilen materialize.min.js web sitenizin bir dizinindeki dosya, örneğin / js ve materialize.min.css / css içinde.

Misal

Dahil et css ve js HTML dosyanıza aşağıdaki gibi.

<!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>

Aşağıdaki sonucu verecektir.

CDN Tabanlı Sürüm

Dahil edebilirsiniz materialize.min.js ve materialize.min.css dosyaları doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza aktarın. cdnjs.cloudflare.com en son sürüm için içerik sağlar.

Bu eğitim boyunca kitaplığın cdnjs.cloudflare.com CDN sürümünü kullanıyoruz.

Misal

Yukarıdaki örneği kullanarak yeniden yazın materialize.min.css ve materialize.min.js cdnjs.cloudflare.com CDN'den.

<!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>

Aşağıdaki sonucu üretecektir -

Materialise, zengin bir renk sınıfı kümesini destekler. Bu renk sınıfları, pazarlamada, yol işaretlerinde ve yapışkan notlarda kullanılan renkler göz önünde bulundurularak ilham alır ve geliştirilir.

  • 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

Kullanım

Aşağıda, uygulanan rengi değiştirmek için kullanılabilecek açıklık / koyuluk sınıflarının listesi verilmiştir.

  • 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

Misal

Aşağıdaki örnek, arka planı oluşturmak veya metnin rengini değiştirmek için yukarıdaki sınıfların nasıl kullanılacağını gösterir. Arka plan durumunda, sınıfları olduğu gibi ekleyin ve metin olması durumunda, renk sınıfına '-metin' soneki ve yıldırım sınıfına 'metin-' öneki ekleyin.

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>

Sonuç

Sonucu doğrulayın.

Materialise, 12 sütunlu bir sıvı duyarlı ızgara sağlar.

Sırasıyla satırları ve sütunları tanımlamak için satır ve sütun stili sınıflarını kullanır.

Sr.No. Sınıf Adı ve Tanımı
1

row

Duyarlı sütunlar için kullanılacak dolgusuz bir kabı belirtir. Bu sınıf, duyarlı sınıfların tamamen duyarlı olması için zorunludur.

2

col

Alt sınıfları olan bir sütun belirtir.

col farklı ekran türleri için tasarlanmış birkaç alt sınıfa sahiptir.

Küçük Ekranlı Cihazlar için Sütunlar

Aşağıda, genellikle akıllı telefonlar gibi küçük ekranlı cihazlar için sütun düzeyinde stillerin bir listesi bulunmaktadır.

Sr.No. Sınıf Adı ve Tanımı
1

s1

Genişliği% 08,33 olan 12 sütundan birini tanımlar.

2

s2

Genişliği% 16,66 olan 12 sütundan 2'sini tanımlar.

3

s3

Genişliği% 25,00 olan 12 sütundan 3'ünü tanımlar.

4

s4

Genişliği% 33,33 olan 12 sütundan 4'ünü tanımlar.

s5 - s11
12

s12

Genişliği% 100 olan 12 sütundan 12'sini tanımlar. Küçük ekranlı telefonlar için varsayılan sınıf.

Orta Boy Ekranlı Cihazlar için Sütunlar

Aşağıda, orta ekranlı cihazlar, tipik olarak tabletler için sütun düzeyi stillerin bir listesi bulunmaktadır.

Sr.No. Sınıf Adı ve Tanımı
1

m1

Genişliğe sahip 12 sütundan 1'ini% 08.33 olarak tanımlar

2

m2

Genişliği% 16,66 olan 12 sütundan 2'sini tanımlar.

3

m3

Genişliği% 25,00 olan 12 sütundan 3'ünü tanımlar.

4

m4

Genişliği% 33,33 olan 12 sütundan 4'ünü tanımlar.

m5 - m11
12

m12

Genişliği% 100 olan 12 sütundan 12'sini tanımlar. Orta ekranlı telefonlar için varsayılan sınıf.

Büyük Ekranlı Cihazlar için Sütunlar

Aşağıda, genellikle dizüstü bilgisayarlar gibi büyük ekranlı aygıtlar için sütun düzeyinde stillerin bir listesi bulunmaktadır.

Sr.No. Sınıf Adı ve Tanımı
1

l1

Genişliği% 08,33 olan 12 sütundan birini tanımlar.

2

l2

Genişliği% 16,66 olan 12 sütundan 2'sini tanımlar.

3

l3

Genişliği% 25,00 olan 12 sütundan 3'ünü tanımlar.

4

l4

Genişliği% 33,33 olan 12 sütundan 4'ünü tanımlar.

l5 - l11
12

l12

Genişliği% 100 olan 12 sütundan 12'sini tanımlar. Büyük ekranlı cihazlar için varsayılan sınıf.

Kullanım

Her alt sınıf, bir aygıtın türüne göre kullanılacak ızgaranın sütun sayısını belirler. Aşağıdaki HTML pasajını düşünün.

<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>

Bir HTML öğesinin sınıf özniteliğinde bir alt sınıf belirtilmemişse, kullanılacak varsayılan sütunlar bir cihazda 12'dir.

Misal

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>

Sonuç

Sonucu doğrulayın.

Materialise, günlük tasarım ihtiyaçları için yararlı olan çeşitli yardımcı sınıflara sahiptir.

  • Color utility classes - Örneğin, .red, .green, .grey vb.

  • Alignment utility classes - Örneğin, .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right

  • Hiding Content utility classes as per device size - Örneğin, .hide, .hideon-küçük-küçük, .hide-on-med, .hide-on-med-and-down, .hide-on-med-and-up ve .hide-on- yalnızca büyük

  • Formatting utility classes - Örneğin, kısaltılmış, üzerine getirilebilir

Misal

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>

Sonuç

Sonucu doğrulayın.

Materialise, görüntüleri ve videoları farklı boyutlara duyarlı hale getirmek için çeşitli sınıflara sahiptir.

  • responsive-img - Görüntünün ekran boyutuna göre kendisini yeniden boyutlandırmasını sağlar.

  • video-container - Gömülü videolara sahip duyarlı kapsayıcı için.

  • responsive-video - HTML5 videolarını duyarlı hale getirir.

Misal

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>

Sonuç

Sonucu doğrulayın.

Materialise, kapları kağıt benzeri gölgeli kartlar olarak görüntülemek için birkaç özel sınıfa sahiptir.

Sr.No. Sınıf Adı ve Tanımı
1

z-depth-0

Varsayılan olarak z derinliğine sahip öğelerin gölgesini kaldırır.

2

z-depth-1

1px çerçeveli gölgeli herhangi bir HTML içeriği için bir kapsayıcıyı biçimlendirir. 1 z derinliği ekler.

3

z-depth-2

2px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kabı biçimlendirir. 2'lik z derinliği ekler.

4

z-depth-3

3px bordered shadow ile herhangi bir HTML içeriği için bir konteyneri şekillendirir. 3 z derinliği ekler.

5

z-depth-4

4px bordered shadow ile herhangi bir HTML içeriği için bir konteyneri biçimlendirir. 4 z derinliği ekler.

6

z-depth-5

5px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kabı biçimlendirir. 5'lik z derinliği ekler.

Misal

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>

Sonuç

Sonucu doğrulayın.

Materialise, tablo üzerinde çeşitli stiller kullanarak farklı tablo türlerini görüntülemek için kullanılabilir.

Sr.No. Sınıf Adı ve Tanımı
1

None

Herhangi bir kenarlık içermeyen temel bir tabloyu temsil eder.

2

stripped

Soyulmuş bir tablo görüntüler.

3

bordered

Satırlar arasında kenarlıklı bir tablo çizer.

4

highlight

Vurgulu bir tablo çizer.

5

centered

Tabloda tüm metin merkezi hizalanmış bir tablo çizer.

6

responsive-table

Ekran içeriği görüntülemek için çok küçükse, yatay bir kaydırma çubuğunu göstermek için duyarlı bir tablo çizer.

Misal

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>

Sonuç

Sonucu doğrulayın.

Kullanımları materyalize edin Roboto 2.0standart yazı tipi olarak. Aşağıdaki CSS stili kullanılarak geçersiz kılınabilir.

html {
   font-family: GillSans, Calibri, Trebuchet, sans-serif;
}

Aşağıda başlıklar, blok alıntılar ve serbest akışlı ancak duyarlı metin örnekleri verilmiştir.

Misal

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>

Sonuç

Sonucu doğrulayın.

Materyalize rozet bileşeni, bir sayı veya simge olabilen bir ekran bildirimidir. Genellikle öğelerin sayısını vurgulamak için kullanılır.

Sr.No. Sınıf Adı ve Tanımı
1

badge

Bir öğeyi MDL rozet bileşeni olarak tanımlar. Yayılma öğesi için gereklidir.

2

new

Bir rozet bileşenine "yeni" bir sınıf ekler, ona bir arka plan verir.

Aşağıda, rozetleri farklı şekillerde kullanma örnekleri verilmiştir.

Misal

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>

Sonuç

Sonucu doğrulayın.

Materialise, düğmelere önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeler uygulamak için farklı CSS sınıfları sağlar. Aşağıdaki tablo mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

btn

Düğme veya bağlayıcıyı gerekli bir Materyalleştir düğmesi olarak ayarlar. Yükseltilmiş görüntü efektini bir düğmeye ayarlar.

2

btn-floating

Dairesel bir düğme oluşturur.

3

btn-flat

Varsayılan olarak düz ekran efektini bir düğmeye ayarlar.

4

btn-large

Büyük düğmeler oluşturur.

5

disabled

Devre dışı bırakılmış bir düğme oluşturur.

6

type = "submit"

Bir bağlantı veya düğmeyi birincil düğme olarak temsil eder.

7

waves-effect

Dalgalanma tıklama efektini ayarlar, diğer sınıflarla birlikte kullanılabilir.

Misal

Aşağıdaki örnek, farklı düğme türlerini göstermek için mdl-düğme sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, kolay bir şekilde güzel bir kırıntı oluşturmak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

nav-wrapper

Gezinti bileşenini içerik haritası / gezinme çubuğu sarmalayıcı olarak ayarlar.

2

breadcrumb

Bağlantı öğesini içerik haritası olarak ayarlar. Son bağlantı elemanı etkindir, geri kalanı ise gri olarak gösterilir.

Misal

Aşağıdaki örnek, gezinme çubuğunu göstermek için içerik haritası sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, çeşitli kart türlerini görüntülemek için önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak için farklı CSS sınıfları sağlar. Aşağıdaki tablo mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

card

Div öğesini Materialize kart kapsayıcısı olarak tanımlar. "Dış" div üzerinde gereklidir.

2

card-content

Div'i bir kart içeriği kapsayıcısı olarak tanımlar ve "iç" div için gereklidir.

3

card-title

Div'i bir kart başlığı kapsayıcısı olarak tanımlar ve "iç" başlık div'de gereklidir.

4

card-action

Div'i bir kart eylemleri konteyneri olarak tanımlar ve eylemler metnine uygun metin özellikleri atar. "İç" eylemlerde gereklidir div; içerik, araya giren kapsayıcılar olmadan doğrudan div'in içine gider.

5

card-image

Div'i bir kart görüntüsü kapsayıcısı olarak tanımlar ve "iç" div üzerinde gereklidir.

6

card-reveal

Div'i açığa çıkan bir metin kapsayıcı olarak tanımlar.

7

activator

Div'i açık bir metin kabı ve daha açıklayıcı bir görüntü olarak tanımlar. Görüntüyle ilgili bağlamsal bilgileri göstermek için kullanılır.

8

card-panel

Div'i gölgeler ve dolgulu basit bir kart olarak tanımlar.

9

card-small

Div'i küçük boyutlu bir kart olarak tanımlar. Yükseklik: 300px;

10

card-medium

Div'i orta büyüklükte bir kart olarak tanımlar. Yükseklik: 400px;

11

card-large

Div'i büyük boyutlu bir kart olarak tanımlar. Yükseklik: 500 piksel;

Misal

Aşağıdaki örnek, çeşitli kart türlerini sergilemek için kart sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, küçük bir bilgi kümesini temsil etmek için kullanılabilen Chip adlı özel bir bileşen sağlar. Örneğin, bir kişi, etiketler vb.

Sr.No. Sınıf Adı ve Tanımı
1

chip

Div kapsayıcısını çip olarak ayarlayın.

Misal

Aşağıdaki örnek, çeşitli etiket türleri oluşturmayı göstermek için chip sınıfının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, çeşitli koleksiyon türlerini temsil etmek için özel sınıflar sağlar; burada bir koleksiyon, bir grup ilgili bilgi öğesini temsil eder.

Sr.No. Sınıf Adı ve Tanımı
1

collection

Div veya ul kapsayıcısını bir koleksiyon olarak ayarlar.

2

collection-item

A veya li öğesini bir koleksiyon öğesi olarak ayarlar.

3

active

A veya li öğesini etkin bir koleksiyon öğesi olarak gösterir.

4

with-header

Koleksiyonu bir başlığa sahip olacak şekilde işaretler.

5

collection-header

A veya li öğesini bir koleksiyon başlığı olarak ayarlar.

6

avatar

A veya li öğesini bir avatar öğesi olarak ayarlar.

7

dismissible

Koleksiyon öğelerinin hızlıca kaydırılmasını sağlar. Yalnızca dokunmatik ekranlı cihazlarda çalışır.

Misal

Aşağıdaki örnek, çeşitli koleksiyon türleri oluşturmayı göstermek için koleksiyon sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, bir koleksiyonun bir grup ilgili bilgi öğesini temsil ettiği çeşitli koleksiyon türlerini temsil etmek için özel sınıflar sağlar.

Sr.No. Sınıf Adı ve Tanımı
1

page-footer

Div kapsayıcısını altbilgi olarak ayarlar.

2

footer-copyright

Div kapsayıcısını bir altbilgi telif hakkı kapsayıcısı olarak ayarlar.

Misal

Aşağıdaki örnek, örnek bir altbilgiyi göstermek için altbilgi sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, form tasarımı için çok güzel ve duyarlı bir CSS'ye sahiptir. Aşağıdaki CSS kullanılıyor -

Sr.No. Sınıf Adı ve Tanımı
1

input-field

Div kapsayıcısını bir giriş alanı kabı olarak ayarlar. Gereklidir.

2

validate

Bir giriş alanına doğrulama stilleri ekler.

3

active

Aktif stile sahip bir girişi gösterir.

4

materialize-textarea

Bir metin alanını biçimlendirmek için kullanılır. Metin alanları, içindeki metne göre otomatik olarak yeniden boyutlandırılacaktır.

5

filled-in

Doldurulmuş kutu stiline sahip bir onay kutusu gösterir.

Misal

Aşağıdaki örnek, örnek bir formu sergilemek için girdi sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Önemli Giriş Kontrolleri

Materialise, çok sayıda girdi denetimi türü için CSS sağlar. Aşağıdaki tablo aynı şeyi detaylandırmaktadır.

Sr.No. Giriş Tipi Ad & Açıklama
1 Seçiniz

Çeşitli giriş türleri seçer

2 Anahtarlar

Çeşitli anahtar türleri

3 Dosya

Çeşitli dosya girişi türleri

4 Aralık

Çeşitli aralık girişi türleri

5 Tarih Seçici

Tarih Seçici

6 Karakter Sayacı

Karakter Sayacı

Materialise, aşağıdaki popüler simge kitaplıklarını destekler -

  • Harika Yazı Tipi Simgeleri
  • Google Materyal Simgeleri
  • Bootstrap Simgeleri

Kullanım

Bir simge kullanmak için, simgenin adını bir HTML <i> öğesi sınıfına koyun. Bir simgenin boyutunu kontrol etmek için aşağıdaki sınıfları kullanabilirsiniz -

Sr.No. Sınıf Adı ve Tanımı
1

tiny

Çok küçük boyutlu bir simge çizer. 1rem.

2

small

Küçük boyutlu bir simge çizer. 2rem.

3

medium

Orta büyüklükte bir simge çizer. 4rem.

4

large

Büyük boyutlu bir simge çizer. 6rem.

Misal

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>

Sonuç

Sonucu doğrulayın.

Materialise, kolay bir şekilde güzel bir gezinme çubuğu oluşturmak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

nav-wrapper

Gezinti bileşenini gezinme çubuğu / içerik haritası sarmalayıcı olarak ayarlar.

2

brand-logo

Bağlantı öğesini ana logo olarak ayarlar.

3

nav-mobile

Ul öğesini bir gezinme çubuğu olarak ayarlar.

Misal

Aşağıdaki örnek, çeşitli gezinme çubuğunu göstermek için navbar sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, kolay bir şekilde güzel bir sayfalama çubuğu oluşturmak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

pagination

Ul öğesini sayfalandırma bileşeni olarak ayarlar.

Misal

Aşağıdaki örnek, bir sayfalandırma çubuğunu göstermek için navbar sınıflarının kullanımını gösterir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, çeşitli ön yükleyici türlerini veya ilerleme çubuklarını görüntülemek için önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

progress

Bir öğeyi ilerleme bileşeni olarak tanımlar. Div öğesi için gereklidir.

2

determinate

Temel Materyalleştir davranışını ilerleme göstergesine ayarlar.

3

indeterminate

Animasyonu ilerleme göstergesine ayarlar.

Misal

Aşağıda, ön yükleyicilerin farklı şekillerde kullanılmasına bir örnek verilmiştir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, çeşitli akordeon türlerini görüntülemek için önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

collapsible

Bir elemanı, materyalize katlanabilir bir bileşen olarak tanımlar. Ul öğesi için gereklidir.

2

collapsible-header

Div'i bölüm başlığı olarak ayarlar.

3

collapsible-body

Div'i bölüm içerik kabı olarak ayarlar.

4

popout

Açılır pencere katlanabilir oluşturur.

5

active

Bir bölüm açar.

6

expandable

Katlanabilir bir bileşeni genişletilebilir olarak işaretler.

7

accordion

Katlanabilir bir bileşeni akordeon olarak işaretler.

Aşağıda akordeonların farklı şekillerde kullanılmasına bir örnek verilmiştir.

Misal

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>

Sonuç

Sonucu doğrulayın.

Materialise, kullanıcılara göze batmayan uyarıları göstermek için çeşitli özel yöntemler sağlar. Materialise onlar için bir kadeh kaldırma terimi sağlar. Aşağıda, bir iletişim kutusunu tost olarak göstermek için sözdizimi verilmiştir.

Materialize.toast(message, displayLength, className, completeCallback);

Nerede,

  • message - Kullanıcıya gösterilecek mesaj.

  • displayLength - Sonrasında kaybolacak mesajın süresi.

  • className- Tosta uygulanacak stil sınıfı. Örneğin, "yuvarlak".

  • completeCallback - Tost reddedildiğinde çağrılacak geri arama yöntemi.

Araç ipucu için Materialize aşağıdaki CSS sınıflarını sağlar.

Sr.No. Sınıf Adı ve Tanımı
1

tooltipped

Araç ipucuna sahip bir bileşeni tanımlar.

2

data-position

Araç ipucunun konumu; alt, üst, sol veya sağ.

3

data-delay

Araç ipucunun ne kadar süre sonra kaybolacağını belirler.

4

data-tooltip

Araç ipucu içeriğini ayarlar.

Misal

Aşağıdaki örnek, tostların ve araç ipuçlarının kullanımını göstermektedir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, bir ul öğesini bir açılır liste olarak yapmak ve ul öğesinin kimliğini düğmenin veya bağlantı öğesinin veri etkinleştirir özniteliğine eklemek için açılır CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

dropdown-content

Ul'yi somut bir açılır liste bileşeni olarak tanımlar. Ul öğesi için gereklidir.

2

data-activates

açılır ul öğesinin kimliği.

Misal

Aşağıda, açılır menü kullanımına bir örnek verilmiştir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, bir ulsekme olarak öğe. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

tabs

Ul'yi somutlaştırılmış sekme bileşeni olarak tanımlar. Ul öğesi için gereklidir.

2

active

Bir sekmeyi aktif hale getirir.

Misal

Aşağıda sekme kullanımına bir örnek verilmiştir.

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>

Sonuç

Sonucu doğrulayın.

Materialise, Materyal Tasarım'da ana hatları çizilen mürekkep efekti oluşturmak için harici bir kitaplık olan Waves'i kullanır. Aşağıdaki tablo mevcut sınıfları ve etkilerini göstermektedir.

Sr.No. Sınıf Adı ve Tanımı
1

waves-effect

Kontrole bir dalga efekti uygular.

2

waves-light

Beyaz renkli bir dalga efekti uygular.

3

waves-red

Kırmızı renkli bir dalga efekti uygular.

4

waves-green

Yeşil renkli bir dalga efekti uygular.

5

waves-yellow

Sarı renkli bir dalga efekti uygular.

6

waves-orange

Turuncu renkli bir dalga efekti uygular.

7

waves-purple

Mor renkli bir dalga efekti uygular.

8

waves-teal

Deniz mavisi renkli bir dalga efekti uygular.

Misal

Aşağıda, düğmelerde dalga efektlerinin kullanımına bir örnek verilmiştir.

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>

Sonuç

Sonucu doğrulayın.