Tipografia
O módulo Sass Ignite UI for Angular Typography permite que você modifique a tipografia de todos os componentes do seu aplicativo, escala tipográfica específica ou componentes específicos.
Visão geral
Uma aplicação pode definir múltiplas tipografiasscales que podem compartilhar categorias de escala entre si. Ascale category é um conjunto detype styles, contendo informações sobrefont-family,font-size,font-weight,line-height,letter-spacing, etext-transform.
Ignite UI for Angular expõe 4 escalas de tipos padrão para cada um de seus temas -$material-type-scale,$fluent-type-scale,$bootstrap-type-scale, e$indigo-type-scale, que por sua vez são usadas pelotypography mixin para definir os estilos tipográficos. No entanto, você pode criar escalas de tipos adicionais.
Em muitos casos, você só precisaria fazer pequenas modificações na tipografia, portanto, é recomendado que você leia a seção Tipografia da documentação de Variáveis CSS primeiro, se ainda não o fez. Usar o Sass para modificar a tipografia só é necessário se você quiser fazer mudanças mais profundas referentes a toda a escala tipográfica.
Usage
Important
Por padrão, não aplicamos nenhum estilo tipográfico. Para usar nossa tipografia na sua aplicação, você precisa definir aig-typography classe CSS em um elemento de nível superior e incluir otypography mixin no seu arquivo base.scss.
Selecionamos Titillium Web para ser a fonte padrão no tema Material para Ignite UI for Angular. Para usá-lo, você precisa hospedá-lo você mesmo, ou incluí-lo do Google Fonts:
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet"/>
Existem vários mixins e funções que são usados para definir e recuperar estilos de categoria para/de uma escala de tipo. São eles:
type-style[função] - Retorna um conjunto de regras de estilo para serem usadas por uma categoria de escala de tipos.type-scale[função] - Retorna um conjunto de 13 categorias de estilo.type-scale-category[função] - Retorna um mapa de regras de estilo a partir de uma escala e categoria de tipos.type-style[mixin] - Adiciona regras de estilo a um seletor de uma escala e categoria de tipos específicas.type-style-vars[mixin] - Adiciona regras de estilo a um seletor a partir de um estilo específico de tipo.typography[mixin] - Define os estilos de tipografia de aplicação global.
Vamos dar uma olhada mais de perto no que cada um dos mixins e funções mencionados acima fazem.
The Type Style
Atype-style função é uma função semelhante a uma interface que simplesmente garante que certos argumentos sejam passados como parte do conjunto de estilos para uma categoria de escala. Digamos, por exemplo, que queiramos definir um novo conjunto de regras de estilo para ah1 categoria de escala. Para isso, poderíamos simplesmente escrever:
$h1-style: type-style(
$font-size: rem(112px),
$font-weight: 600,
$line-height: rem(96px),
...,
);
The Type Scale
A escala de tipo produz um mapa de 13 estilos de tipografia usados como categorias de escala. Para gerar uma nova escala de tipo, faça o seguinte:
$my-type-scale: type-scale(...);
Important
Você precisa fornecer um estilo de tipo para cada uma das 13 categorias de escala. Um estilo pode ser gerado usando atype-style função mostrada acima.
$my-type-scale: type-scale(
$h1: $h1-style,
[$h2...$overline],
);
Você pode modificar uma escala de tipo existente estendendo-a. Para mudar oh1 estilo tipográfico do$material-type-scale que você pode fazer:
$my-type-scale: extend(
$material-type-scale,
(
h1: type-style(...),
)
);
Adicionar estilos de tipo adicionais a uma escala é igualmente 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
O mixin de tipografia define os estilos de tipografia globais para um aplicativo, incluindo como os elementos nativos h1-h6 e p são estilizados.
Atualmente, ele aceita 2 argumentos:
$font-family- A família global de fontes a ser usada pela aplicação.$type-scale- A escala de tipo padrão a ser usada pela aplicação.
Para usar os estilos tipográficos, inclua atypography mixina em qualquer lugar após ocore. Vamos aproveitar a escala$my-type-scale de tipos que definimos acima e torná-la a escala padrão.
@include typography(
$font-family: $material-typeface,
$type-scale: $my-type-scale
);
Exponhemos quatro variáveis para a fonte, semelhante à escala de tipos -$material-typeface,$fluent-typeface,$bootstrap-typeface, e$indigo-typeface. Você pode usar qualquer um deles em combinação com qualquer escala de tipo ao incluir otypography mixin.
Custom Type Styles
Atype-style mixin pode ser usada para recuperar as regras de estilo de uma categoria de escala a partir de uma escala de tipo específica. Além disso, permite adicionar regras de estilo adicionais.
.my-fancy-h1 {
@include type-style('h1') {
color: royalblue;
}
}
O código acima produzirá um seletor.my-fancy-h1 de estilo de classe, que contém todas as regras de estilo para ah1 categoria de escala de$my-type-scale com a adição docolor conjunto de propriedades àroyalblue cor. Agora, se você definir a classe de qualquer elemento para.my-fancy-h1, ele vai parecer qualquer outroh1 elemento, mas tambémroyalblue ser colorido.
Component Typography
A maioria dos componentes em Ignite UI for Angular usa categorias de escala para estilizar o texto. Por exemplo, oigx-card componente utiliza as seguintes categorias de escala:
h6- usado para estilizar o título do cartão.subtitle-2- usado para styling card legendas e títulos pequenos.body-2- usado para estilizar o conteúdo do texto das cartas.
Existem duas maneiras de mudar os estilos de texto de uma carta. A primeira é modificando ash6,subtitle-2, e/oubody-2 escalas na escala de tipos de material que passamos para a mistura tipográfica. Então, se quisermos deixar o título de um cartão menor, tudo o que precisamos fazer é mudar o tamanho da fonte dah6 categoria 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
O código acima modificará ah6 categoria de escala globalmente, o que afetará a aparência e a sensação de todos os componentes que utilizam ah6 escala. Isso é feito para manter a consistência, para que todosh6 os elementos pareçam iguais em todo o seu app. Entendemos que você pode querer aplicar a modificação parah6 apenas em componentes específicos, como oigx-card componente no nosso caso. É por isso que cada componente tem sua própria mistura tipográfica, que aceita uma configuração de categoria.
// 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);
}
Não incluímos mais atypography mixina passando a$my-type-scale escala com nossa modificação para ah6 categoria. Agora tudo o que fazemos é passar o estilo h6 personalizado que criamos para otype-style-vars mixin.
Usando o mixin card-typography, podemos atualizar os estilos de tipografia para todos os elementos no componente card. No exemplo acima, a chave title-small no mapa $card-categories é atribuída ao estilo de tipo subtitle-1. Essa alteração torna o título pequeno no card um pouco maior. Por padrão, o componente card usa o estilo de tipo subtitle-2 para o título pequeno, que tem um tamanho de fonte menor que o subtitle-1. O mixin nos permite substituir esse padrão e aplicar o novo estilo.
Converting Units
Também temos três funções tipográficas para converter unidades de propriedade. Com as funções, podemos converterpx unidades paraem ourem, e tambémem ourem unidades parapx. Tudo o que precisamos fazer é chamar uma das três funções e passar um valor que queremos converter.
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);
}
É importante lembrar que, ao converter um valor, a conversão é baseada em um tamanho de fonte base padrão de 16px (onde 16px = 1em/rem). Se quisermos, podemos fornecer um tamanho de fonte base personalizado como um argumento para a função de conversão. Isso garantirá que o valor resultante seja calculado em relação ao tamanho de fonte base especificado.
.my-component {
margin: rem(10px, 26px);
// The result will be 0.385rem
}
Isso converterá o valor de 10px para rem, com base no tamanho de fonte de 26px.
CSS Classes
Além de adicionar estilos de texto para todos os componentes baseados nas categorias de escala de tipos, também estilizamos os elementos padrão h1-h6 e p. Isso nos permite separar semântica de estilo. Por exemplo, mesmo que ah1 tag tenha algum estilo padrão que fornecemos ao usartypography, você pode modificá-la para parecer umh3 dando uma classe deig-typography__h3.
<h1 class="ig-typography__h3">Some text</h1>
Aqui está uma lista de todas as classes CSS que fornecemos por padrão:
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
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub