Tematización

Ignite UI for Angular le permite modificar los estilos de todos los temas de los componentes utilizando variables CSS. Si realmente desea profundizar, le ofrecemos un potente motor de temas Sass que le permite crear temas de componentes globales adaptados a su lenguaje de diseño específico que funcionan en todos los navegadores modernos.

Note

Este documento describe el sistema de temas en Ignite UI for Angular desde la versión 12 en adelante. A partir de la versión 12, las variables CSS son la forma recomendada de modificar los temas globales y de componentes. Aún puedes usar la biblioteca temática de Sass como lo harías antes de la versión 12.

Basic Usage

Ignite UI for Angular incluye los siguientes temas como parte de su paquete: - Material - Bootstrap - Fluent - Indigo

Todos los temas tienen variantes claras y oscuras, así como soporte para contenido de izquierda a derecha (LTR) y de derecha a izquierda (RTL) de forma predeterminada. La forma más sencilla de comenzar a utilizar cualquiera de los temas incluidos en su aplicación es especificando la ruta a un archivo de tema CSS en su configuración angular.json. Por ejemplo, si quisieras usar el tema Material oscuro, incluirías la ruta al archivo del tema de esta manera:

"styles": [
  "node_modules/igniteui-angular/styles/igniteui-angular-dark.css",
  "src/styles.css"
]

Note

Si instaló el paquete Ignite UI for Angular usando ng add igniteui-angular, habrá notado que ya agregamos igniteui-angular.css a la matriz de estilos.

Aquí está la lista completa de temas incluidos en la carpeta de estilos:

Nombre del tema	Camino
Luz material	`node_modules/igniteui-angular/styles/igniteui-angular.css`
Material oscuro	`node_modules/igniteui-angular/styles/igniteui-angular-dark.css`
Luz de arranque	`node_modules/igniteui-angular/styles/igniteui-bootstrap-light.css`
Arranque oscuro	`node_modules/igniteui-angular/styles/igniteui-bootstrap-dark.css`
Material verde oscuro	`node_modules/igniteui-angular/styles/igniteui-dark-green.css`
Luz fluida	`node_modules/igniteui-angular/styles/igniteui-fluent-light.css`
Oscuro fluido	`node_modules/igniteui-angular/styles/igniteui-fluent-dark.css`
Luz fluida Excel	`node_modules/igniteui-angular/styles/igniteui-fluent-light-excel.css`
Excel oscuro fluido	`node_modules/igniteui-angular/styles/igniteui-fluent-dark-excel.css`
Palabra ligera fluida	`node_modules/igniteui-angular/styles/igniteui-fluent-light-word.css`
Palabra oscura fluida	`node_modules/igniteui-angular/styles/igniteui-fluent-dark-word.css`
Luz índigo	`node_modules/igniteui-angular/styles/igniteui-indigo-light.css`
Índigo oscuro	`node_modules/igniteui-angular/styles/igniteui-indigo-dark.css`

Como puede ver, enviamos Ignite UI for Angular con una cantidad sustancial de temas.

Sin embargo, este no es el final de nuestra historia temática. Todos los temas se compilan a partir de fuentes Sass y se crean utilizando nuestro potente motor de temas. Este motor contiene mixins y functions de Sass, muchas de las cuales están expuestas públicamente, lo que le permite rediseñar completamente todos los componentes de su aplicación.

Si Sass no es lo tuyo, está completamente bien, hemos facilitado la modificación de los temas compilados usando propiedades CSS personalizadas, o también conocidas como variables CSS. Aún puedes usar Sass en combinación con variables CSS.

Global Variables

Si inspecciona cualquiera de los temas CSS anteriores, notará que hay bastantes variables CSS incluidas en el alcance:root; Incluimos variables de colors, shadows, typography y configuration. Modificar cualquiera de estas variables le permitirá personalizar la apariencia general del tema y, a la inversa, los componentes.

Lo que la mayoría de la gente busca al modificar un tema es cambiar los colores predeterminados utilizados por los componentes.

Si deseas cambiar los colores primarios y secundarios, todo lo que tienes que hacer es escribir lo siguiente en tu archivo styles.css:

/* styles.css */
:root {
  --ig-primary-h: 105deg;
  --ig-primary-s: 29%;
  --ig-primary-l: 56%;

  --ig-secondary-h: 259deg;
  --ig-secondary-s: 63%;
  --ig-secondary-l: 24%;
}

Analicemos los nombres de estas variables de color. El prefijo ig existe como un identificador único para indicar que esta variable es parte de una Ignite UI for Angular, primary es el nombre de la paleta color y h, s y l representan tono, saturación y luminosidad. Analizaremos más profundamente las paletas en la sección Paletas de la documentación. Por ahora todo lo que necesitas saber es que tenemos varios colores base (primario, secundario, éxito, información, etc.) que incluyen diferentes tonos o variantes que se generan a partir de las variables CSS de tono, saturación y luminosidad, The 500 color. Las variantes se consideran los principales valores de representación de tono, saturación y luminosidad. Por ejemplo, la variante de color primario 500 se declara como--ig-primary-500: hsla(var(--ig-primary-h), var(--ig-primary-s), var(--ig-primary-l), var(--ig-primary-a)).

Siguiendo este enfoque, puedes revisar completamente toda la paleta.

Warning

Algunos componentes no utilizan colores de las paletas. En esos casos, tendrá que apuntar directamente a las variables CSS del componente para modificar sus colores. Para saber qué colores de paleta utiliza cada componente, consulte la documentación de componentes.

Asimismo, cambiar las elevations (sombras) es igual de sencillo. Incluimos 25 niveles de elevación (0-24). Aquí hay una versión simplificada de cómo se ven esas variables:

/* styles.css */
:root {
  --ig-elevation-0: none;
  --ig-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.26),
                    0 1px 1px 0 rgba(0, 0, 0, 0.12),
                    0 2px 1px -1px rgba(0, 0, 0, 0.08);
  /* ... */
  --ig-elevation-24: 0 11px 15px -7px rgba(0, 0, 0, 0.26),
                  0 24px 38px 3px rgba(0, 0, 0, 0.12),
                  0 9px 46px 8px rgba(0, 0, 0, 0.08);
}

Estas son esencialmente declaraciones box-shadow CSS apiladas. Puede reemplazarlos con cualquier otro valor box-shadow válido. Cuanto mayor sea el número del nivel de elevación, más grande será la sombra. Nuevamente, diferentes componentes usan diferentes niveles de elevación; para saber qué niveles de elevación utiliza cada componente, consulte la Documentación de componentes. Analizaremos más profundamente las elevaciones en Elevaciones de la documentación.

Configuración

Existen varias variables que te permiten configurar el comportamiento global del tema:

Redondez

Para configurar el factor de radio de todos los componentes, puede cambiar el valor de la variable--ig-radius-factor. El valor predeterminado es 1, lo que significa que el factor de radio predeterminado se utiliza en todos los temas de componentes.

Ejemplo:

/* Makes all components appear blocky in shape */
:root {
  --ig-radius-factor: 0;
}

Factor de elevación

Para configurar el factor de elevación de todos los componentes, puede cambiar el valor de la variable--ig-elevation-factor. El valor predeterminado es 1, lo que significa que las elevaciones predeterminadas se utilizan en todos los temas de los componentes.

Ejemplo:

/* Makes all components appear flat (no-shadows) */
:root {
  --ig-elevation-factor: 0;
}

Component Variables

Todos los componentes ofrecen la posibilidad de modificar sus temas utilizando variables CSS específicas del componente. Cada componente expone dos variables que modifican la misma propiedad. Las variables expuestas pueden considerarse global y local. Ambos modifican el tema del componente de la misma manera, la única diferencia es que las variables global tienen el prefijo igx-[component-name] adjunto al nombre de la variable y se pueden usar desde los selectores principales para diseñar componentes secundarios, mientras que las variables local son específicas. a una instancia de componente.

Veamos un ejemplo. Digamos que deseas modificar el fondo del avatar. El avatar busca las siguientes variables CSS que modifican su fondo:

/* styles.css */
:root {
  --igx-avatar-background: black;
}

igx-avatar {
  --background: orange;
}

El fragmento de arriba establecerá el fondo de todos los avatares en naranja.

El componente de avatar buscará primero la variable--background. Si se establece explícitamente, tomará su valor. En otras palabras, las variables local tienen mayor prioridad y funcionarán solo si se aplican directamente al igx-avatar, ya sea usando su selector de etiquetas o cualquier otro selector dirigido a igx-avatar. La--igx-avatar-background global se puede considerar como una variable alternativa. Se utilizará solo si el--background local no se anula explícitamente.

Para los curiosos, así es como se implementa esto internamente en el avatar:

igx-avatar {
  --background: var(--igx-avatar-background, var(--ig-gray-400));
  background: var(--background);
}

Generalmente usará variables globales cuando desee aplicar cambios a todas las instancias de un componente, mientras que las variables locales apuntan a instancias de componentes específicas y siempre anularán la variable global.

Aquí hay otro ejemplo:

<!-- app.component.html -->
<igx-avatar>AB</igx-avatar>
<igx-avatar>CD</igx-avatar>
<app-contacts></app-contacts>

<!-- contacts.component.html -->
<igx-avatar>EF</igx-avatar>
<igx-avatar>GH</igx-avatar>

/* styles.css */
:root {
  --igx-avatar-background: lavender;
}

/* contacts.component.css */
igx-avatar {
  --background: purple;
}

Los avatares AB y CD utilizarán el color lavanda establecido globalmente como fondo, mientras que los avatares EF y GH tendrán fondos morados.

Cada componente tiene todas sus propiedades de tema documentadas en la sección de estilo de la documentación del componente.

Esto debería ser todo lo que necesita para comenzar con la temática. Puede modificar los colores y las elevaciones de la paleta global y cambiar las propiedades del tema de los componentes creando temas de componentes globales y locales. Si desea obtener más información, contamos con documentación extensa que cubre temas como paletas, elevaciones, tipografía y temas con Sass en profundidad.

Additional Resources

Temas relacionados:

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