Vật liệu góc cạnh - Thẻ
Các md-card, một Chỉ thị Angular, là một chỉ thị vùng chứa và được sử dụng để vẽ các thẻ trong ứng dụng anglejs. Bảng sau liệt kê các chỉ thị góc và các lớp được sử dụng trong thẻ md.
| Sr.No | Chỉ thị / Lớp & Mô tả |
|---|---|
| 1 | <md-card-header> Tiêu đề cho thẻ, chứa hình đại diện, văn bản và hình ảnh bình phương. |
| 2 | <md-card-avatar> Hình đại diện thẻ. |
| 3 | md-user-avatar Đẳng cấp cho hình ảnh người dùng. |
| 4 | <md-icon> Chỉ thị biểu tượng. |
| 5 | <md-card-header-text> Chứa các yếu tố cho mô tả thẻ. |
| 6 | md-title Lớp cho tiêu đề thẻ. |
| 7 | md-subhead Lớp cho tiêu đề phụ của thẻ. |
| số 8 | <img> Hình ảnh cho thẻ. |
| 9 | <md-card-title> Tiêu đề nội dung thẻ. |
| 10 | <md-card-title-text> Vùng chứa văn bản Tiêu đề thẻ. |
| 11 | md-headline Lớp cho tiêu đề nội dung thẻ. |
| 12 | md-subhead Lớp cho tiêu đề phụ của nội dung thẻ. |
| 13 | <md-card-title-media> Hình ảnh bình phương trong tiêu đề. |
| 14 | md-media-sm Lớp cho hình ảnh nhỏ. |
| 15 | md-media-md Lớp cho hình ảnh trung bình. |
| 16 | md-media-lg Lớp cho hình ảnh lớn. |
| 17 | <md-card-content> Nội dung thẻ. |
| 18 | md-media-xl Lớp cho hình ảnh cực lớn. |
| 19 | <md-card-actions> Hành động thẻ. |
| 20 | <md-card-icon-actions> Hành động biểu tượng. |
Thí dụ
Ví dụ sau cho thấy việc sử dụng chỉ thị thẻ md và cả việc sử dụng các lớp thẻ.
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>Kết quả
Xác minh kết quả.