Temas de componentes

Los temas de componentes le permiten cambiar los estilos de instancias de componentes específicos anulando el tema definido globalmente.

Descripción general

Antes de profundizar en cómo puede crear temas a nivel de componente, dediquemos unos minutos a hablar sobre cómo Ignite UI for Angular aborda la creación de temas de componentes. Debido a que queremos poder admitir navegadores más antiguos, como IE11, tenemos dos enfoques completamente diferentes para la tematización de componentes.

El primer enfoque consiste en diseñar instancias de componentes utilizando variables CSS. Al utilizar variables CSS, obtenemos la capacidad de crear temas de componentes sin replicar sus estilos una y otra vez. Además, este enfoque nos permite modificar el valor de las variables CSS en tiempo de ejecución.
El segundo enfoque consiste en crear un nuevo conjunto de reglas CSS que sobrescriban cualquier regla CSS previamente declarada para un componente específico. Este enfoque es bastante sencillo y es la única forma en que podemos brindar compatibilidad con temas sensibles para navegadores más antiguos, aunque no es ideal ya que agrega muchas reglas CSS adicionales al tema CSS generado.

Veremos cómo funcionan estos enfoques en la práctica y cómo usar uno en lugar del otro al generar temas a nivel de componentes.

Creating Themes

Un tema componente consta de varias partes:

La función del tema del componente: una función Sass que normaliza los argumentos pasados y produce un tema para ser consumido por un mixin de componentes.
El mixin de variables CSS: un mixin de Sass que consume un tema de componente y produce variables CSS que se utilizan para diseñar un componente en particular.
El mixin de componentes: un mixin de Sass que consume un tema de componente y produce reglas CSS que se utilizan para diseñar un componente en particular.

Supongamos que desea crear un nuevo tema de avatar global que tenga un color de fondo diferente al que configuramos en el tema predeterminado del avatar. Como se mencionó en la sección de descripción general, existen dos enfoques generales para crear un tema de componente. Hay incluso más formas de organizar y definir el alcance de los temas de sus componentes. La forma más sencilla de hacerlo es en el mismo archivo en el que definiste tu tema global.

Definiendo un tema de avatar:

// Some place after @include theme(...);

// Change the background of the avatar to purple.
$avatar-purple-theme: avatar-theme(
  $background: purple,
);

// Pass the css-vars to the `css-vars` mixin
@include css-vars($avatar-purple-theme);

El código anterior produce variables CSS para eligx-avatar componente. Estas nuevas variables CSS sobrescriben las reglas predeterminadas del avatar. De manera similar, si incluyerascss-vars mixin más adelante en el archivo globalscss, el mixin volverá a sobrescribir cualquier tema previamente definido.

Por ejemplo:

// ...
@include css-vars($avatar-purple-theme);

// Later
$avatar-royalblue-theme: avatar-theme(
  $background: royalblue,
);

@include css-vars($avatar-royalblue-theme);

En el código anterior, el tema global de facto es ahora el$avatar-royalblue-theme ya que sobrescribe cualquier mixin previamente incluidocss-vars.

Esto nos lleva al siguiente punto.

Scoping Themes

Como vimos en el ejemplo anterior, al añadir varios temas dirigidos al mismo componente al mismo nivel, la última mezcla de temas tiene prioridad. Esto se debe a cómo funciona la cascada CSS. Si quieres que dos o más temas estén dirigidos al mismo tipo de componente, tendrás que asignarlos a un selector. Por ejemplo, podemos crear múltiplesigx-avatar temas y asignarlos a selectores CSS específicos que luego podremos usar en nuestro marcado de componentes.

// ...
// CSS class selectors
.avatar-royalblue {
  @include css-vars($avatar-royalblue-theme);
}

.avatar-purple {
  @include css-vars($avatar-purple-theme);
}

En una plantilla de componente:

<div class="avatar-royalblue">
  <igx-avatar initials="AZ"></igx-avatar>
</div>

<div class="avatar-purple">
  <igx-avatar icon="home"></igx-avatar>
</div>

View Encapsulation

Hasta ahora hemos explorado formas de crear temas con alcance global y que se incluyen en un único archivo Sass. Sin embargo, esto no siempre es deseable y, en algunos casos, querrá que el archivo Sass esté vinculado a un componente específico. En esos casos, debemos tener en cuenta la encapsulación de vistas y, específicamente, cómo se emula en Angular.

El equipo de Angular ha adoptado 3 estrategias para la encapsulación de vistas: Emulado (predeterminado), ShadowDom y Ninguno. Para obtener más información sobre cada una de estas estrategias, eche un vistazo a la documentación Angular. Echaremos un vistazo más de cerca a cómo manejar la creación de temas de Ignite UI for Angular componentes que forman parte de los componentes primarios encapsulados de vista.

¿Qué significa exactamenteEmulated la Encapsulación de Vista? Este tipo de encapsulación de vistas no aprovecha la especificación Shadow DOM, sino que emplea una forma de vincular estilos para un componente y sus hijos mediante un identificador único de atributo aplicado al elemento anfitrión.

Echemos un vistazo a un ejemplo que utiliza variables CSS. Creemos un tema de avatar que esté vinculado a un componente principal específico.

Aquí está nuestro componente simple:

import { Component, Input } from "@angular/core";

@Component({
  selector: "app-avatar",
  styleUrls: ["./app-avatar.component.scss"],
  template: `<igx-avatar [initials]="initials"></igx-avatar>`,
})
export class AvatarComponent extends Component {
  @Input() public initials = "AZ";
}

Y así es como se ve nuestra hoja de estilo Sass:

// app-avatar.component.scss

// 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';

$avatar-royalblue-theme: avatar-theme(
  $background: royalblue,
);

:host {
  @include css-vars($avatar-royalblue-theme);
}

Cuando usamos variables CSS, no tenemos que usar el::ng-deep pseudo-selector. Con el código anterior hemos creado variables CSS para eligx-avatar, que siempre tendrároyalblue como color de fondo. El tema de nuestro avatar personalizado no 'filtrará' a otrasigx-avatar instancias de componentes, permaneciendo así encapsulado dentro de nuestro componente personalizadoapp-avatar.

La instancia anterior también podría lograrse sin usar ningún Sass. Todo lo que necesitamos hacer es establecer el valor de la--igx-avatar-background variable CSS al color deseado:

/* app-avatar.component.css */
:host {
  --igx-avatar-background: royalblue;
}

API Overview

Additional Resources

Aprenda a configurar un tema global:

Temas globales

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.