Tipografía
El módulo Ignite UI for Angular Typography Sass le permite modificar la tipografía de todos los componentes de su aplicación, escala tipográfica específica o componentes específicos.
Descripción general
Una aplicación puede definir múltiples scales
de tipografía que pueden compartir categorías de escala entre sí. Una scale category
es un conjunto de type styles
que contiene información sobre font-family
, font-size
, font-weight
, line-height
, letter-spacing
y text-transform
.
Ignite UI for Angular expone 4 escalas de tipos predeterminadas para cada uno de sus temas: $material-type-scale
, $fluent-type-scale
, $bootstrap-type-scale
y $indigo-type-scale
, que a su vez son utilizadas por la combinación typography
para establecer los estilos de tipografía. Sin embargo, puede crear escalas de tipos adicionales.
En muchos casos, solo necesitará realizar ligeras modificaciones en la tipografía, por lo que se recomienda leer primero la sección Tipografía de la documentación de Variables CSS, si aún no lo ha hecho. Solo es necesario usar Sass para modificar la tipografía si desea realizar cambios más profundos relacionados con toda la escala tipográfica.
Usage
De forma predeterminada, no aplicamos ningún estilo de tipografía. Para utilizar nuestra tipografía en su aplicación, debe configurar la clase CSS ig-typography
en un elemento de nivel superior e incluir el mixin typography
en su archivo.scss
base.
Hemos seleccionado Titillium Web como fuente predeterminada en el tema Material de Ignite UI for Angular. Para usarlo tienes que alojarlo tú mismo o incluirlo desde Google Fonts:
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet"/>
html
Hay varios mixins y funciones que se utilizan para establecer y recuperar estilos de categoría hacia/desde una escala de tipos. Esos son:
type-style
[función]: devuelve un conjunto de reglas de estilo que se utilizarán en una categoría de escala de tipo.type-scale
[función] - Devuelve un conjunto de 13 categorías de estilo.type-scale-category
[función] - Devuelve un mapa de reglas de estilo de una escala y categoría de tipos.type-style
[mixin] - Agrega reglas de estilo a un selector de una escala y categoría de tipo específicas.type-style-vars
[mixin]: agrega reglas de estilo a un selector de un estilo de letra específico.typography
[mixin] - Define los estilos de tipografía de la aplicación global.
Echemos un vistazo más de cerca a lo que hace cada uno de los mixins y funciones antes mencionados.
The Type Style
La función type-style
es una función similar a una interfaz que simplemente garantiza que ciertos argumentos se pasen como parte del estilo establecido para una categoría de escala. Digamos, por ejemplo, que queremos definir un nuevo conjunto de reglas de estilo para la categoría de escala h1
. Para hacerlo, simplemente podríamos escribir:
$h1-style: type-style(
$font-size: rem(112px),
$font-weight: 600,
$line-height: rem(96px),
...,
);
scss
The Type Scale
La escala de tipos produce un mapa de 13 estilos tipográficos utilizados como categorías de escala. Para generar una nueva escala de tipo, haga lo siguiente:
$my-type-scale: type-scale(...);
scss
Debe proporcionar un estilo de letra para cada una de las 13 categorías de escala. Se puede generar un estilo utilizando la función type-style
como se muestra arriba.
$my-type-scale: type-scale(
$h1: $h1-style,
[$h2...$overline],
);
scss
Puede modificar una escala de tipos existente ampliándola. Para cambiar el estilo de tipo h1
de $material-type-scale
puedes hacer:
$my-type-scale: extend(
$material-type-scale,
(
h1: type-style(...),
)
);
scss
Agregar estilos de letra adicionales a una escala es igual de fácil:
$my-type-category: type-style(
$font-weight: 600,
$font-size: rem(42px),
$text-transform: uppercase,
...,
);
$my-type-scale: extend(
$my-type-scale,
(
"my-category": $my-type-category,
)
);
scss
The Typography Mixin
El mixin de tipografía define los estilos de tipografía globales para una aplicación, incluido el estilo de los elementos nativos h1-h6 y p.
Actualmente acepta 2 argumentos:
$font-family
: la familia de fuentes global que utilizará la aplicación.$type-scale
: la escala de tipos predeterminada que utilizará la aplicación.
To use the typography styles, include the typography
mixin anywhere after the core
. Let's take advantage of the type scale $my-type-scale
we defined above and make it the default type scale.
@include typography(
$font-family: $material-typeface,
$type-scale: $my-type-scale
);
scss
Exponemos cuatro variables para el tipo de letra, similar a type-scale: $material-typeface
, $fluent-typeface
, $bootstrap-typeface
y $indigo-typeface
. Puede utilizar cualquiera de ellos en combinación con cualquier escala de tipos al incluir la combinación typography
.
Custom Type Styles
El mixin type-style
se puede utilizar para recuperar las reglas de estilo para una categoría de escala de una escala de tipo específica. Además, le permite agregar reglas de estilo adicionales.
.my-fancy-h1 {
@include type-style('h1') {
color: royalblue;
}
}
scss
El código anterior producirá un selector de estilo de clase.my-fancy-h1
, que contiene todas las reglas de estilo para la categoría de escala h1
de $my-type-scale
con la adición de la propiedad color
establecida en el color royalblue
. Ahora, si configura la clase de cualquier elemento en.my-fancy-h1
, se verá como cualquier otro elemento h1
pero también será de color royalblue
.
Component Typography
La mayoría de los componentes de Ignite UI for Angular utilizan categorías de escala para diseñar el texto. Por ejemplo, el componente igx-card
utiliza las siguientes categorías de escala:
h6
: se utiliza para diseñar el título de la tarjeta.subtitle-2
: se utiliza para diseñar subtítulos de tarjetas y títulos pequeños.body-2
: se utiliza para diseñar el contenido del texto de la tarjeta.
There are two ways to change the text styles of a card. The first is by modifying the h6
, subtitle-2
, and/or body-2
scales in the material type scale that we pass to the typography mixin. So if we wanted to make the title in a card smaller, all we have to do is change the font-size of the h6
scale category.
// Create a custom h6 scale category style
$my-h6: type-style(
$font-size: rem(12px),
);
// Create a custom type scale with the modified h6
$my-type-scale: extend(
$material-type-scale,
(
h6: $my-h6,
)
);
// Pass the custom scale to the global typography mixin
@include typography($type-scale: $my-type-scale);
scss
El código anterior modificará la categoría de escala h6
globalmente, lo que afectará la apariencia de todos los componentes que usan la escala h6
. Esto se hace por coherencia para que todos los elementos h6
tengan el mismo aspecto en su aplicación. Entendemos que es posible que desees aplicar la modificación para h6
solo a componentes específicos, como el componente igx-card
en nuestro caso. Es por eso que cada componente tiene su propia combinación de tipografía, que acepta una configuración de categorías.
// Create a custom h6 scale category style
$my-h6: type-style(
$font-size: rem(12px),
);
// You can specify which categories from the type sale the card uses
$card-categories: (
title: 'h6',
title-small: 'subtitle-1',
subtitle: 'subtitle-2',
content: 'body-2',
);
.my-cool-card {
// Overwrite the 'h6' type style for this scope
@include type-style-vars('h6', $my-h6);
// Pass the custom card catergories to the card typography mixin
@include card-typography($card-categories);
}
scss
Ya no incluimos la combinación typography
pasándole la escala $my-type-scale
con nuestra modificación a la categoría h6
. Ahora todo lo que hacemos es pasar el estilo h6 personalizado que creamos al mixin type-style-vars
.
Using the card-typography mixin, we can update the typography styles for all elements in the card component. In the example above, the title-small key in the $card-categories map is assigned the subtitle-1 type style. This change makes the small title in the card slightly larger. By default, the card component uses the subtitle-2 type style for the small title, which has a smaller font size than subtitle-1. The mixin allows us to override this default and apply the new style.
Converting Units
We also have three typography functions for converting property units. With the functions we can convert px
units to em
or rem
, and also em
or rem
units to px
.
All we need to do is call one of the three functions and pass a value that we want to convert.
To 'px'
.my-component {
margin: px(3.23rem);
}
scss
To 'rem'
.my-component {
margin: rem(10px) rem(5px);
}
scss
To 'em'
.my-component {
margin: em(10px) em(5px);
}
scss
It's important to remember that when converting a value, the conversion is based on a default base font size of 16px (where 16px = 1em/rem). If we want, we can provide a custom base font size as an argument to the conversion function. This will ensure that the resulting value is calculated relative to the specified base font size.
.my-component {
margin: rem(10px, 26px);
// The result will be 0.385rem
}
scss
This will convert the 10px value to rem, based on the font size of 26px.
CSS Classes
Además de agregar estilos de texto para todos los componentes según las categorías de escala de tipos, también aplicamos estilos a los elementos h1-h6 y p predeterminados. Esto nos permite separar la semántica del estilo. Entonces, por ejemplo, aunque la etiqueta h1
tiene algún estilo predeterminado que proporcionamos cuando usamos typography
, puedes modificarla para que parezca h3
dándole una clase de ig-typography__h3
.
<h1 class="ig-typography__h3">Some text</h1>
html
Aquí hay una lista de todas las clases de CSS que proporcionamos de forma predeterminada:
ig-typography__h1
ig-typography__h2
ig-typography__h3
ig-typography__h4
ig-typography__h5
ig-typography__h6
ig-typography__subtitle-1
ig-typography__subtitle-2
ig-typography__body-1
ig-typography__body-2
ig-typography__button
ig-typography__caption
ig-typography__overline