Materyalize - Kartlar

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 gerekli 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ölgeli 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.