Vật liệu góc cạnh - Kiểu chữ
Angular Material cung cấp các lớp CSS typography khác nhau có thể được sử dụng để tạo sự nhất quán trực quan trên ứng dụng Angular JS.
Bảng sau liệt kê các lớp khác nhau với mô tả của chúng.
| Sr.No | Tên & Mô tả Lớp học |
|---|---|
| 1 | md-display-1 Hiển thị văn bản với Thông thường 34px. |
| 2 | md-display-2 Hiển thị văn bản với Thông thường 45px. |
| 3 | md-display-3 Hiển thị văn bản với Thông thường 56px. |
| 4 | md-display-4 Hiển thị văn bản với Light 112px. |
| 5 | md-headline Hiển thị văn bản với Thông thường 24px. |
| 6 | md-title Hiển thị văn bản với Trung bình 20px. |
| 7 | md-subhead Hiển thị văn bản với 16px Thông thường. |
| số 8 | md-body-1 Hiển thị văn bản với Thông thường 14px. |
| 9 | md-body-2 Hiển thị văn bản với Trung bình 14px. |
| 10 | md-button Hiển thị nút với Trung bình 14px. |
| 11 | md-caption Hiển thị văn bản với thông thường 12px. |
Thí dụ
Ví dụ sau đây cho thấy việc sử dụng các lớp CSS typography.
am_typography.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('typographyController', typographyController);
function typographyController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "frameContainer" ng-controller = "typographyController as ctrl"
layout = "column" layout-padding layout-wrap layout-fill
style = "padding-bottom: 32px;" ng-cloak>
<p class = "md-display-4">.md-display-4</p>
<p class = "md-display-3">.md-display-3</p>
<p class = "md-display-2">.md-display-2</p>
<p class = "md-display-1">.md-display-1</p>
<p class = "md-headline">.md-headline</p>
<p class = "md-title">.md-title</p>
<p class = "md-subhead">.md-subhead</p>
<p class = "md-body-1">.md-body-1</p>
<p class = "md-body-2">.md-body-2</p>
<md-button>.md-button</md-button>
<p class = "md-caption">.md-caption</p>
</div>
</body>
</html>Kết quả
Xác minh kết quả.