Material Design Lite - การ์ด
MDL มีคลาส CSS ที่หลากหลายเพื่อใช้การปรับปรุงภาพและพฤติกรรมต่างๆที่กำหนดไว้ล่วงหน้าและแสดงการ์ดประเภทต่างๆ ตารางต่อไปนี้แสดงรายการคลาสที่มีและเอฟเฟกต์
| ซีเนียร์ | ชื่อชั้นเรียนและคำอธิบาย |
|---|---|
| 1 | mdl-card ระบุองค์ประกอบ div เป็นคอนเทนเนอร์การ์ด MDL ซึ่งจำเป็นสำหรับ div "ด้านนอก" |
| 2 | mdl-card--border ใส่เส้นขอบให้กับส่วนการ์ดที่ใช้และใช้กับ div "inner" |
| 3 | mdl-shadow--2dp through mdl-shadow--16dp ตั้งค่าความลึกของเงาที่แปรผัน (2, 3, 4, 6, 8 หรือ 16) ให้กับการ์ดและเป็นทางเลือกโดยใช้ div "ด้านนอก" หากละเว้นจะไม่มีเงาปรากฏ |
| 4 | mdl-card__title ระบุ div เป็นที่เก็บหัวเรื่องการ์ดและจำเป็นสำหรับ div ชื่อเรื่อง "inner" |
| 5 | mdl-card__title-text ใส่ลักษณะข้อความที่เหมาะสมให้กับชื่อการ์ดและจำเป็นต้องใช้บน head tag (H1 - H6) ภายใน title div |
| 6 | mdl-card__subtitle-text ใส่ลักษณะข้อความให้กับคำบรรยายการ์ดและเป็นทางเลือก ควรเป็นลูกขององค์ประกอบหัวเรื่อง |
| 7 | mdl-card__media ระบุ div เป็นคอนเทนเนอร์สื่อการ์ดและจำเป็นต้องใช้กับ div สื่อ "inner" |
| 8 | mdl-card__supporting-text ระบุ div เป็นที่เก็บข้อความเนื้อหาการ์ดและกำหนดลักษณะข้อความที่เหมาะสมให้กับข้อความเนื้อหาและจำเป็นต้องใช้กับ div ข้อความเนื้อหา "ภายใน" ข้อความจะเข้าไปใน div โดยตรงโดยไม่มีการแทรกแซงคอนเทนเนอร์ |
| 9 | mdl-card__actions ระบุ div เป็นคอนเทนเนอร์การดำเนินการของการ์ดและกำหนดลักษณะข้อความที่เหมาะสมให้กับข้อความการดำเนินการและจำเป็นสำหรับ div การดำเนินการ "ภายใน" เนื้อหาจะเข้าสู่ div โดยตรงโดยไม่มีคอนเทนเนอร์แทรกแซง |
ตัวอย่าง
ตัวอย่างต่อไปนี้จะช่วยให้คุณเข้าใจการใช้คลาส mdl-tooltip เพื่อแสดงคำแนะนำเครื่องมือประเภทต่างๆ
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>ผลลัพธ์
ตรวจสอบผลลัพธ์