Angular Material - 卡片
md-card，一个 Angular 指令，是一个容器指令，用于在 angularjs 应用程序中绘制卡片。 下表列出了 md-card 中使用的角度指令和类。
| Sr.No | 指令/类和描述 |
|---|---|
| 1 | <md-card-header> 卡片标题，包含头像、文本和方形图像。 |
| 2 | <md-card-avatar> 卡片头像。 |
| 3 | md-user-avatar 用户图像类。 |
| 4 | <md-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-subhead 卡片内容子标题的类。 |
| 13 | <md-card-title-media> 标题中的方形图像。 |
| 14 | md-media-sm 小图像类。 |
| 15 | md-media-md 中等图像类。 |
| 16 | md-media-lg 大图像类。 |
| 17 | <md-card-content> 卡片内容。 |
| 18 | md-media-xl 超大图像类。 |
| 19 | <md-card-actions> 卡片操作。 |
| 20 | <md-card-icon-actions> 图标操作。 |
示例
以下示例显示了 md-card 指令的使用以及卡类的使用。
am_cards.html
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://www.cainiaomax.com/lib/angular_material/1.0.0/angular-material.min.css">
<script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular.min.js"></script>
<script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-animate.min.js"></script>
<script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-aria.min.js"></script>
<script src = "https://cdn.staticfile.org/angular.js/1.4.8/angular-messages.min.js"></script>
<script src = "https://www.cainiaomax.com/lib/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 @www.cainiaomax.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 是 HTML 标准的下一个主要修订版本，取代 HTML 4.01、XHTML 1.0 和 XHTML 1.1。 HTML5 是在万维网上构建和呈现内容的标准。</p>
<p>HTML5 是万维网联盟 (W3C) 和 Web 超文本应用技术工作组 (WHATWG) 之间的合作成果。</p>
</p>新标准整合了视频播放和拖放等功能，这些功能以前依赖于 Adobe Flash、Microsoft Silverlight 和 Google Gears 等第三方浏览器插件。</p>
</md-card-content>
</md-card>
</body>
</html>
结果
验证结果。
