md-card ,Angular Directive,是一个容器指令,用于在angularjs应用程序中绘制卡片.下表列出了md-card中使用的angular指令和类.
Sr.No | 指令/类&说明 |
---|---|
1 | < md-card-header> 卡的标题,保存头像,文字和平方图像. |
2 | < md-card-avatar> 卡片头像. |
3 | md-user-avatar 用户图片类. |
4 | < md- icon> Icon指示. |
5 | < md-card-header-text> 包含卡片描述的元素. |
6 | md-title 卡片名称的分类. |
7 | md-subhead 卡子标题的类. |
8 | < img> 图片该卡. |
9 | < md-card-title> 卡片内容标题. |
10 | < md-card-title-text> 卡片标题文本容器. |
11 | md-headline 卡片内容标题的分类. |
12 | md-子标题 卡片内容子标题的类. |
13 | < md-card-title-media> 标题内的平方图像. |
14 | md-media-sm 小图像的类. |
15 | md -media-md 中等图像的等级. |
16 | md-media-lg 大班image. |
17 | < md-card-content> 卡片内容. |
18 | md-media-xl 超大图像的等级. |
19 | < md-card-actions> 卡片操作. |
20 | < md-card-icon-行动> 图标操作. |
以下示例显示了md-card指令的使用以及卡类的使用.
am_cards.htm
<html lang = "en"> <head> <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> <script language = "javascript"> angular .module('firstApplication', ['ngMaterial']) .controller('cardController', cardController); function cardController ($scope) { } </script> </head> <body ng-app = "firstApplication"> <md-card> <img ng-src = "/html5/images/html5-mini-logo.jpg" class = "md-card-image" alt = "Learn HTML5"> <md-card-header> <md-card-avatar> <img class = "md-user-avatar" src = "/html5/images/html5-mini-logo.jpg"> </md-card-avatar> <md-card-header-text> <span class = "md-title">HTML5</span> <span class = "md-subhead">Learn HTML5 @TutorialsPoint.com</span> </md-card-header-text> </md-card-header> <md-card-title> <md-card-title-text> <span class = "md-headline">HTML5</span> </md-card-title-text> </md-card-title> <md-card-actions layout = "row" layout-align = "start center"> <md-button>Download</md-button> <md-button>Start</md-button> <md-card-icon-actions> <md-button class = "md-icon-button" aria-label = "icon"> <md-icon class = "material-icons">add</md-icon> </md-button> </md-card-icon-actions> </md-card-actions> <md-card-content> <p>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.</p> <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).</p> </p>The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p> </md-card-content> </md-card> </body> </html>
验证结果.