Material Design Lite 卡
2018-12-27 16:33 更新
该MDL提供多种CSS类各种预先定义的外观和行为增强功能适用于显示各类卡片。下表中提到的可用类和它们的影响。
| SN | 类名称和说明 |
|---|---|
| 1 | MDL-卡 标识div元素的要求对“外”的div一个MDL卡容器。 |
| 2 | MDL-卡-边界 把一个边界，它的应用并在“内部”的div使用卡部分。 |
| 3 | MDL-阴影- 2DP通过MDL阴影- 16DP 设置可变阴影深度（2，3，4，6，8，或16）卡是可选的，那张“外”的div;如果省略，没有阴影所示。 |
| 4 | MDL-card__title DIV标识作为卡标题和容器上需要“内部”称号股利。 |
| 五 | MDL-card__title文本 提出相应的文本特点卡标题和需要在头标记（H1 - H6）标题DIV中。 |
| 6 | MDL-card__subtitle文本 将文本特性的卡片字幕和可选。它应该是标题元素的子元素。 |
| 7 | MDL-card__media 标识的div作为卡片介质容器中，需要对“内”媒体专区 |
| 8 | MDL-card__supporting文本 DIV标识作为卡体文字容器，并分配相应的文本特点，正文，并要求对“内部”正文DIV;文字直接进入了DIV中没有插入容器。 |
| 9 | MDL-card__actions DIV标识作为卡的行为容器分配适当的文字特点的行为文字和需要的“内部”的行动DIV;内容直接进入了DIV中没有插入容器。 |
例
下面的例子展示了使用MDL-提示类的显示不同类型的工具提示。
mdl_cards.htm
<html>
<head>
<script src="/attachments/tuploads/materialdesignlite/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>
结果
验证结果。
以上内容是否对您有帮助：
更多建议：