Temas globales
Descripción general
Si ha incluido el archivo igniteui-angular.css
en el proyecto de su aplicación, ahora es un buen momento para eliminarlo. Usaremos nuestro propio archivo my-app-theme.scss
para generar un tema global para todos los componentes de nuestra aplicación.
Ignite UI for Angular utiliza un tema global de forma predeterminada para crear un tema para todo el conjunto de componentes. Sin embargo, puede crear temas específicos para los componentes que tiene en su aplicación, según su caso de uso. Por ahora, incluiremos todos nuestros temas en un solo archivo. Para generar un tema global, incluiremos dos mixins core
y theme
. Ambos mixins aceptan algunos argumentos:
Core mixin
Nombre | Tipo | Por defecto | Descripción |
---|---|---|---|
$print-layout |
booleano | verdadero | Incluir/excluir los estilos para imprimir. |
$enhanced-accessibility |
booleano | FALSO | Cambia los colores de los componentes y otras propiedades a valores más accesibles. |
Theme mixins
Nombre | Tipo | Por defecto | Descripción |
---|---|---|---|
$palette |
mapa | null |
El mapa de paleta que utilizarán los temas predeterminados de todos los componentes. |
$schema |
mapa | $light-material-schema |
El esquema utilizado como base para diseñar los componentes. |
$exclude |
lista | () |
Una lista de temas componentes que se excluirán del tema global. |
$roundness |
Número | null |
Establece el factor de redondez global para todos los componentes (el valor puede ser cualquier fracción decimal entre 0 y 1). |
$elevation |
booleano | true |
Activa/desactiva las elevaciones para todos los componentes del tema. |
$elevations |
Mapa | $material-elevations |
El mapa de elevación que utilizarán todos los temas componentes. |
Vamos a crear un tema global personalizado que utilizará los colores primarios, secundarios y de superficie de nuestra empresa.
// Import the theming module
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
$primary-color: #2ab759;
$secondary-color: #f96a88;
$surface-color: #fff;
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color,
$surface: $surface-color
);
// IMPORTANT: Make sure you always include core first!
@include core();
@include typography();
// Pass the color palette we generated to the theme mixin.
@include theme($my-color-palette);
scss
Expliquemos qué hacen los mixins core
y theme
. El mixin core
se encarga de algunas configuraciones, como agregar accesibilidad mejorada (por ejemplo, colores adecuados para usuarios daltónicos) y estilos de impresión para todos los componentes. La combinación theme
incluye cada estilo de componente individual (excepto los que figuran como excluidos) y configura la paleta, el esquema, las elevaciones y la redondez que no figuran en la lista de componentes $exclude
.
Incluir core
el antes theme
es esencial. Los core
mixins proporcionan todas las definiciones básicas necesarias para que la theme
mezcla funcione correctamente.
Excluding Components
El mixin theme
le permite proporcionar una lista de nombres de componentes que se excluirán de los estilos de temas globales. Por ejemplo, si desea eliminar por completo todos los estilos que incluimos para igx-avatar
e igx-badge
para reducir la cantidad de CSS producido o para proporcionar sus propios estilos personalizados, puede hacerlo pasando la lista de componentes de esta manera:
// ...
$unnecessary: (igx-avatar, igx-badge);
@include theme($my-color-palette, $exclude: $unnecessary);
scss
Si sabe que su aplicación no utilizará algunos de nuestros componentes, le recomendamos que los agregue a la lista $exclude
.
Puede hacer lo contrario, es decir, incluir sólo los estilos de componentes que desee utilizando el método siguiente:
@use 'sass:map';
@function include($items, $register) {
@return map.keys(map.remove($register, $items...));
}
$allowed: (igx-avatar, igx-badge);
@include theme(
$exclude: include($allowed, $components)
);
scss
Light and Dark Themes
También ofrecemos versiones claras y oscuras para nuestros cuatro temas: Material, Fluent, Indigo, Bootstrap.
Para usar cualquiera de las versiones, simplemente tendrías que pasarlo a nuestro tema mixin:
Luz
@include core();
@include typography(
$font-family: $material-typeface,
$type-scale: $material-type-scale
);
@include theme(
$schema: $light-material-schema,
$palette: $light-material-palette,
);
scss
Oscuro
@include core();
@include typography(
$font-family: $material-typeface,
$type-scale: $material-type-scale
);
@include theme(
$schema: $dark-material-schema,
$palette: $dark-material-palette,
);
scss
Available Themes
Ignite UI for Angular te ofrece la opción de elegir entre un conjunto de temas predefinidos. La siguiente tabla muestra todos los temas integrados que puede utilizar de inmediato.
Tema | Esquema | Paleta de color |
---|---|---|
Material: Luz | $light-material-schema |
$paleta-de-materiales-claros |
Material: Oscuro | $dark-material-schema |
$paleta-de-material-oscuro |
Luz fluida | $light-fluent-schema |
$paleta-luz-fluida $paleta-excel-fluida-luz $paleta-de-palabras-luz-fluida |
Fluido Oscuro | $dark-fluent-schema |
$paleta-fluida-oscura $paleta-de-excel-fluida-oscura $paleta-de-palabras-fluidas-oscuras |
Luz de arranque | $light-bootstrap-schema |
$paleta-bootstrap-luz |
Bootstrap Oscuro | $dark-bootstrap-schema |
$paleta-bootstrap-oscura |
Luz índigo | $light-indigo-schema |
$paleta-índigo-claro |
Índigo Oscuro | $dark-indigo-schema |
$paleta-índigo-oscuro |
Additional Resources
Aprenda a crear temas de componentes individuales:
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.