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