Material Design Lite - Thẻ
MDL cung cấp một loạt các lớp CSS để á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 và hiển thị các loại thẻ khác nhau. Bảng sau liệt kê 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 | mdl-card Xác định phần tử div như một vùng chứa thẻ MDL, bắt buộc trên div "bên ngoài". |
| 2 | mdl-card--border Đặt đường viền cho phần thẻ mà nó được áp dụng và được sử dụng trên các div "bên trong". |
| 3 | mdl-shadow--2dp through mdl-shadow--16dp Đặt độ sâu bóng thay đổi (2, 3, 4, 6, 8 hoặc 16) cho thẻ và là tùy chọn, đi trên div "bên ngoài"; nếu bỏ qua, không có bóng nào được hiển thị. |
| 4 | mdl-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". |
| 5 | mdl-card__title-text Đặt các đặc điểm văn bản thích hợp cho tiêu đề thẻ và được yêu cầu trên thẻ head (H1 - H6) bên trong div tiêu đề. |
| 6 | mdl-card__subtitle-text Đặt đặc điểm văn bản vào phụ đề thẻ và là tùy chọn. Nó phải là một phần tử con của phần tử tiêu đề. |
| 7 | mdl-card__media Xác định div là một vùng chứa phương tiện thẻ và được yêu cầu trên div phương tiện "bên trong". |
| số 8 | mdl-card__supporting-text Xác định div là vùng chứa văn bản nội dung thẻ và chỉ định các đặc điểm văn bản thích hợp cho văn bản nội dung và được yêu cầu trên div văn bản nội dung "bên trong"; văn bản đi trực tiếp bên trong div mà không có vùng chứa can thiệp. |
| 9 | mdl-card__actions Xác định div như một vùng chứa hành động thẻ và gán các đặc điểm văn bản thích hợp cho văn bản hành động và được yêu cầu đố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. |
Thí dụ
Ví dụ sau sẽ giúp bạn hiểu việc sử dụng các lớp mdl-tooltip để hiển thị các loại chú giải công cụ khác nhau.
mdl_cards.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family = Material+Icons">
<style>
.wide-card.mdl-card {
width: 512px;
}
.square-card.mdl-card {
width: 256px;
height: 256px;
}
.image-card.mdl-card {
width: 256px;
height: 256px;
background: url('html5-mini-logo.jpg') center / cover;
}
.image-card-image__filename {
color: #000;
font-size: 14px;
font-weight: bold;
}
.event-card.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.event-card.mdl-card__title {
color: #fff;
height: 176px;
}
.event-card > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
display: flex;
box-sizing:border-box;
align-items: center;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
<tr>
<td>
<div class = "wide-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
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.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
<td>
<div class = "square-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
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.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
</tr>
<tr><td>Image Card</td><td>Event Card</td></tr>
<tr>
<td>
<div class = "image-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand"></div>
<div class = "mdl-card__actions">
<span class = "image-card-image__filename">html5-logo.jpg</span>
</div>
</div>
</td>
<td>
<div class = "event-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand">
<h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar</a>
<div class = "mdl-layout-spacer"></div>
<i class = "material-icons">event</i>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Kết quả
Xác minh kết quả.