Material angular - Tipografía
Angular Material proporciona varias clases CSS de tipografía que se pueden usar para crear consistencia visual en la aplicación Angular JS.
La siguiente tabla enumera las diferentes clases con su descripción.
| No Señor | Nombre y descripción de la clase |
|---|---|
| 1 | md-display-1 Muestra el texto con 34px normal. |
| 2 | md-display-2 Muestra el texto con 45px Regular. |
| 3 | md-display-3 Muestra el texto con 56px Regular. |
| 4 | md-display-4 Muestra el texto con Light 112px. |
| 5 | md-headline Muestra el texto con 24px normal. |
| 6 | md-title Muestra el texto con Medio 20px. |
| 7 | md-subhead Muestra el texto con 16px normal. |
| 8 | md-body-1 Muestra el texto con 14px normal. |
| 9 | md-body-2 Muestra el texto con Medio 14px. |
| 10 | md-button Muestra el botón con Medio 14px. |
| 11 | md-caption Muestra el texto con 12px normal. |
Ejemplo
El siguiente ejemplo muestra el uso de clases CSS de tipografía.
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>Resultado
Verifique el resultado.