Materiale angolare - Tipografia

Angular Material fornisce varie classi CSS tipografiche che possono essere utilizzate per creare coerenza visiva nell'applicazione Angular JS.

La tabella seguente elenca le diverse classi con la loro descrizione.

Suor n Nome e descrizione della classe
1

md-display-1

Mostra il testo con Regular 34px.
2

md-display-2

Mostra il testo con Regular 45px.
3

md-display-3

Mostra il testo con Regular 56px.
4

md-display-4

Mostra il testo con Light 112px.
5

md-headline

Mostra il testo con 24px regolare.
6

md-title

Mostra il testo con Medio 20px.
7

md-subhead

Mostra il testo con Regular 16px.
8

md-body-1

Mostra il testo con Regular 14px.
9

md-body-2

Mostra il testo con Medio 14px.
10

md-button

Mostra il pulsante con Medio 14px.
11

md-caption

Mostra il testo con 12px regolare.

Esempio

L'esempio seguente mostra l'uso delle classi CSS di tipografia.

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>

Risultato

Verifica il risultato.