Matériau angulaire - Typographie
Angular Material fournit diverses classes CSS de typographie qui peuvent être utilisées pour créer une cohérence visuelle dans l'application Angular JS.
Le tableau suivant répertorie les différentes classes avec leur description.
Sr. Non | Nom et description de la classe |
---|---|
1 | md-display-1 Affiche le texte avec Regular 34px. |
2 | md-display-2 Affiche le texte avec Regular 45px. |
3 | md-display-3 Affiche le texte avec Regular 56px. |
4 | md-display-4 Affiche le texte avec Light 112px. |
5 | md-headline Affiche le texte avec Regular 24px. |
6 | md-title Affiche le texte avec Medium 20px. |
sept | md-subhead Affiche le texte avec Regular 16px. |
8 | md-body-1 Affiche le texte avec Regular 14px. |
9 | md-body-2 Affiche le texte avec Medium 14px. |
dix | md-button Affiche le bouton avec Medium 14px. |
11 | md-caption Affiche le texte avec Regular 12px. |
Exemple
L'exemple suivant montre l'utilisation de classes CSS de typographie.
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>
Résultat
Vérifiez le résultat.