Vật chất hóa - Thẻ

Materialize cung cấp các lớp CSS khác nhau để áp dụng các cải tiến hình ảnh và hành vi khác nhau được xác định trước để hiển thị các loại thẻ khác nhau. Bảng sau đề cập đến các lớp có sẵn và tác dụng của chúng.

Sr.No. Tên & Mô tả Lớp học
1

card

Xác định phần tử div như một vùng chứa thẻ Materialize. Bắt buộc trên div "bên ngoài".

2

card-content

Xác định div là vùng chứa nội dung thẻ và được yêu cầu trên div "bên trong".

3

card-title

Xác định div là vùng chứa tiêu đề thẻ và được yêu cầu trên div tiêu đề "bên trong".

4

card-action

Xác định div là vùng chứa hành động thẻ và chỉ định các đặc điểm văn bản thích hợp cho văn bản hành động. Bắt buộc đối với hành động "bên trong" div; nội dung đi trực tiếp bên trong div mà không có vùng chứa can thiệp.

5

card-image

Xác định div là vùng chứa hình ảnh thẻ và được yêu cầu trên div "bên trong".

6

card-reveal

Xác định div là một vùng chứa văn bản được tiết lộ.

7

activator

Xác định div là vùng chứa văn bản được tiết lộ và hình ảnh sẽ được hiển thị. Được sử dụng để hiển thị thông tin ngữ cảnh liên quan đến hình ảnh.

số 8

card-panel

Xác định div là một thẻ đơn giản có bóng và phần đệm.

9

card-small

Xác định div là một thẻ có kích thước nhỏ. Chiều cao: 300px;

10

card-medium

Xác định div là một thẻ có kích thước trung bình. Chiều cao: 400px;

11

card-large

Xác định div là một thẻ có kích thước lớn. Chiều cao: 500px;

Thí dụ

Ví dụ sau đây giới thiệu việc sử dụng các lớp thẻ để giới thiệu nhiều loại thẻ khác nhau.

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>

Kết quả

Xác minh kết quả.