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 tipografíasscales que pueden compartir categorías de escala entre sí. Ascale category es un conjunto detype styles, que contiene información sobrefont-family,font-sizefont-weight,,line-height,letter-spacing, ytext-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 eltypography mixin para establecer los estilos tipográficos. Sin embargo, puedes 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
Important
Por defecto no aplicamos ningún estilo tipográfico. Para usar nuestra tipografía en tu aplicación tienes que establecer laig-typography clase CSS en un elemento de nivel superior e incluir eltypography mixin en tu archivo base.scss.
Hemos seleccionado Titillium Web para que sea la fuente predeterminada en el tema Material para 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"/>
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 serán usadas por una categoría de escala de tipos.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[mezcla] - Añade reglas de estilo a un selector de una escala y categoría de tipos específicas.type-style-vars[mezcla] - Añade reglas de estilo a un selector de un estilo específico de tipo.typography[mezcla] - Define los estilos tipográficos de 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
Latype-style función es una función similar a una interfaz que simplemente asegura que ciertos argumentos se pasen como parte del conjunto de estilos para una categoría de escala. Supongamos, por ejemplo, que queremos definir un nuevo conjunto de reglas de estilo para lah1 categoría de escala. Para ello, podríamos simplemente escribir:
$h1-style: type-style(
$font-size: rem(112px),
$font-weight: 600,
$line-height: rem(96px),
...,
);
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(...);
Important
Tienes que proporcionar un estilo tipográfico para cada una de las 13 categorías de escala. Se puede generar un estilo usando latype-style función mostrada arriba.
$my-type-scale: type-scale(
$h1: $h1-style,
[$h2...$overline],
);
Puedes modificar una escala de tipos existente extendiéndola. Para cambiar elh1 estilo tipográfico de lo$material-type-scale que puedes hacer:
$my-type-scale: extend(
$material-type-scale,
(
h1: type-style(...),
)
);
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,
)
);
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 global de fuentes que va a utilizar la aplicación.$type-scale- La escala de tipos predeterminada que debe usar la aplicación.
Para usar los estilos tipográficos, incluye latypography mezcla en cualquier lugar posterior a lacore. Aprovechemos la escala$my-type-scale de tipos que definimos antes y hagamos que sea la escala de tipos por defecto.
@include typography(
$font-family: $material-typeface,
$type-scale: $my-type-scale
);
Exponemos cuatro variables para la tipografía, similar a la escala de tipo -$material-typeface,$fluent-typeface,$bootstrap-typeface, y$indigo-typeface. Puedes usar cualquiera de ellos en combinación con cualquier escala de tipos al incluir eltypography mixin.
Custom Type Styles
Eltype-style mixin puede utilizarse para recuperar las reglas de estilo de una categoría de escala de una escala de tipo específica. Además, te permite añadir reglas de estilo adicionales.
.my-fancy-h1 {
@include type-style('h1') {
color: royalblue;
}
}
El código anterior producirá un selector.my-fancy-h1 de estilo de clase, que contiene todas las reglas de estilo para lah1 categoría de escala de$my-type-scale con la adición de lacolor propiedad conjunta alroyalblue color. Ahora, si configuras la clase de cualquier elemento en.my-fancy-h1, se verá como cualquier otroh1 elemento pero tambiénroyalblue será en color.
Component Typography
La mayoría de los componentes en Ignite UI for Angular utilizan categorías de escala para estilizar el texto. Por ejemplo, eligx-card componente utiliza las siguientes categorías de escala:
h6- Usado para el título de la tarjeta de estilo.subtitle-2- Usado para estilizar la tarjeta subtítulos y títulos pequeños.body-2- usado para estilizar contenido de texto de la tarjeta.
Hay dos formas de cambiar los estilos de texto de una carta. La primera es modificando lash6,subtitle-2, y/obody-2 escalas en la escala de tipo de material que pasamos a la mezcla tipográfica. Así que si quisiéramos hacer el título de una tarjeta más pequeño, solo tendríamos que cambiar el tamaño de la fuente de lah6 categoría de escala.
// 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);
Warning
El código anterior modificará lah6 categoría de escala a nivel global, lo que afectará al aspecto y la sensación de todos los componentes que usan lah6 escala. Esto se hace para mantener la coherencia y que todosh6 los elementos se vean igual en toda tu aplicación. Entendemos que puede que quieras aplicar la modificación soloh6 a componentes específicos, como eligx-card componente en nuestro caso. Por eso cada componente tiene su propia mezcla tipográfica, que acepta una configuración de categoría.
// 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);
}
Ya no incluimos latypography mezcla pasándola la$my-type-scale escala con nuestra modificación a lah6 categoría. Ahora solo pasamos el estilo h6 personalizado que creamos altype-style-vars mixin.
Usando la combinación de tipografía de tarjeta, podemos actualizar los estilos de tipografía para todos los elementos del componente de tarjeta. En el ejemplo anterior, a la clave title-small del mapa de categorías $card se le asigna el estilo de tipo subtitle-1. Este cambio hace que el título pequeño de la carta sea un poco más grande. De forma predeterminada, el componente de tarjeta utiliza el estilo de letra subtitle-2 para el título pequeño, que tiene un tamaño de fuente más pequeño que el subtitle-1. La mezcla nos permite anular este valor predeterminado y aplicar el nuevo estilo.
Converting Units
También disponemos de tres funciones tipográficas para convertir unidades de propiedad. Con las funciones podemos convertirpx unidades aem orem, y tambiénem orem unidades apx. Solo tenemos que llamar a una de las tres funciones y pasar un valor que queremos convertir.
To 'px'
.my-component {
margin: px(3.23rem);
}
To 'rem'
.my-component {
margin: rem(10px) rem(5px);
}
To 'em'
.my-component {
margin: em(10px) em(5px);
}
Es importante recordar que al convertir un valor, la conversión se basa en un tamaño de fuente base predeterminado de 16 px (donde 16 px = 1em/rem). Si queremos, podemos proporcionar un tamaño de fuente base personalizado como argumento para la función de conversión. Esto asegurará que el valor resultante se calcule en relación con el tamaño de fuente base especificado.
.my-component {
margin: rem(10px, 26px);
// The result will be 0.385rem
}
Esto convertirá el valor de 10px a rem, basado en el tamaño de fuente de 26px.
CSS Classes
Además de añadir estilos de texto para todos los componentes basados en las categorías de escala de tipos, también estilizamos los elementos predeterminados h1-h6 y p. Esto nos permite separar la semántica del estilismo. Por ejemplo, aunque lah1 etiqueta tenga cierto estilo predeterminado que proporcionamos al usarlatypography, puedes modificarla para que parezca ah3 una asignándole una clase deig-typography__h3.
<h1 class="ig-typography__h3">Some text</h1>
Aquí hay una lista de todas las clases de CSS que proporcionamos de forma predeterminada:
ig-typography__h1ig-typography__h2ig-typography__h3ig-typography__h4ig-typography__h5ig-typography__h6ig-typography__subtitle-1ig-typography__subtitle-2ig-typography__body-1ig-typography__body-2ig-typography__buttonig-typography__captionig-typography__overline
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub