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.