免費(fèi)AI編程助手
Material Design Lite 卡
2018-12-27 16:33 更新
該MDL提供多種CSS類各種預(yù)先定義的外觀和行為增強(qiáng)功能適用于顯示各類卡片。下表中提到的可用類和它們的影響。
| SN | 類名稱和說(shuō)明 |
|---|---|
| 1 | MDL-卡 標(biāo)識(shí)div元素的要求對(duì)“外”的div一個(gè)MDL卡容器。 |
| 2 | MDL-卡-邊界 把一個(gè)邊界，它的應(yīng)用并在“內(nèi)部”的div使用卡部分。 |
| 3 | MDL-陰影- 2DP通過MDL陰影- 16DP 設(shè)置可變陰影深度（2，3，4，6，8，或16）卡是可選的，那張“外”的div;如果省略，沒有陰影所示。 |
| 4 | MDL-card__title DIV標(biāo)識(shí)作為卡標(biāo)題和容器上需要“內(nèi)部”稱號(hào)股利。 |
| 五 | MDL-card__title文本 提出相應(yīng)的文本特點(diǎn)卡標(biāo)題和需要在頭標(biāo)記（H1 - H6）標(biāo)題DIV中。 |
| 6 | MDL-card__subtitle文本 將文本特性的卡片字幕和可選。它應(yīng)該是標(biāo)題元素的子元素。 |
| 7 | MDL-card__media 標(biāo)識(shí)的div作為卡片介質(zhì)容器中，需要對(duì)“內(nèi)”媒體專區(qū) |
| 8 | MDL-card__supporting文本 DIV標(biāo)識(shí)作為卡體文字容器，并分配相應(yīng)的文本特點(diǎn)，正文，并要求對(duì)“內(nèi)部”正文DIV;文字直接進(jìn)入了DIV中沒有插入容器。 |
| 9 | MDL-card__actions DIV標(biāo)識(shí)作為卡的行為容器分配適當(dāng)?shù)奈淖痔攸c(diǎn)的行為文字和需要的“內(nèi)部”的行動(dòng)DIV;內(nèi)容直接進(jìn)入了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>
結(jié)果
驗(yàn)證結(jié)果。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：