Angular Material Cards
The md-card ,一个Angular指令,是一个容器指令,用于在angularjs应用程序中绘制Cards片。下表列出了 md-card 中使用的角度指令和类。
序号 | 指令/类别和描述 |
---|---|
1 |
Cards片的标题,包含头像、文本和方形图像。 |
2 |
Cards头像。 |
3 |
md-用户头像 用户图像类。 |
4 |
图标指令。 |
5 |
包含Cards片描述的元素。 |
6 |
md-title Cards片标题的类。 |
7 |
md-副标题 Cards子标题的类。 |
8 |
<图片> Cards片的图像。 |
9 |
Cards片内容标题。 |
10 |
Cards片标题文本容器。 |
11 |
md 标题 Cards片内容标题的类。 |
12 |
md-副标题 Cards片内容子标题的类。 |
13 |
标题内的平方图像。 |
14 |
md-媒体-sm 小图像类。 |
15 |
md-媒体-md 中等图像类。 |
16 |
md-媒体-lg 大图像类。 |
17 |
Cards片内容。 |
18 |
md-媒体-xl 超大图像的类。 |
19 |
Cards片动作。 |
20 |
图标动作。 |
例子
以下示例显示了 md-card 指令的使用以及Cards片类的使用。
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 src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"> <script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"> <script src = "https:// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"> <script src = "https:// ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"> <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 @NewbieGo.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>
Result
验证结果。