MDL提供了一系列CSS类,可应用各种预定义的视觉和行为增强功能,并显示不同类型的卡片.下表列出了可用的类及其效果.
Sr.No. | Class Name&描述 |
---|---|
1 | mdl-card 将div元素标识为"外部"div所需的MDL卡容器. |
2 | mdl-card - border 将边框放到应用它的卡片部分并用于"内部" divs. |
3 | mdl-shadow - 2dp到mdl-shadow - 16dp 设置变量阴影深度(2 ,3,4,6,8或16)到卡并且是可选的,进入"外部"div;如果省略,则不显示阴影. |
4 | mdl-card__title 将div标识为卡片标题容器并且是必需的在"内部"标题div. |
5 | mdl-card__title-text 将适当的文字特征放入卡片标题中在标题div内的头标记(H1 - H6)上需要. |
6 | mdl-card__subtitle-text 放置文字特征到一个卡片字幕,是可选的.它应该是title元素的子元素. |
7 | mdl-card__media 将div标识为卡片媒体容器,在"内部"媒体div上是必需的. |
8 | mdl-card__supporting-text 将div标识为卡片正文容器并为正文分配适当的文本特征,并且在"内部"正文文本div上是必需的;文本直接进入div内部,没有中间容器. |
9 | mdl-card__actions 将div标识为卡片操作容器并为动作文本指定适当的文本特征,并且在"内部"动作div上是必需的;内容直接在div内部,没有中间容器. |
以下示例将帮助您了解使用mdl-tooltip类来显示
不同类型的工具提示.
<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>