Tematización

Ignite UI for Angular le permite modificar los estilos de todos los temas componentes utilizando variables CSS. Si realmente quería profundizar, proporcionamos 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. Todavía puede usar la biblioteca de temas de Sass como lo habría hecho antes de la versión 12.

Basic Usage

Ignite UI for Angular incluye los siguientes temas como parte de su paquete:

Material
Oreja
Fluido
Índigo

Todos los temas tienen variantes claras y oscuras, así como soporte por defecto para contenido de izquierda a derecha (LTR) y de derecha a izquierda (RTL). La forma más sencilla de empezar a usar cualquiera de los temas incluidos en tu aplicación es especificar la ruta hacia un archivo de tema CSS en tuangular.json configuración. Por ejemplo, si quisieras usar el tema Dark Material, incluirías la ruta al archivo del tema así:

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

Note

Si has instalado el paquete Ignite UI for Angular conng add igniteui-angular el que usas, habrás notado que ya hemos añadidoigniteui-angular.css al array 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, esto no es el final de nuestra historia de tematización. Todos los temas se recopilan del código fuente Sass y se construyen usando nuestro potente motor de tematización. Este motor contiene Sassmixins yfunctions muchos de los cuales están expuestos públicamente, lo que te permite rediseñar completamente todos los componentes de tu 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 inspeccionas cualquiera de los temas CSS anteriores, notarás que hay bastantes variables CSS incluidas en el:root ámbito; Incluimos variables paracolors,shadows,typography, yconfiguration. Modificar cualquiera de estas variables te permitirá personalizar el aspecto general del tema y, por el contrario, 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 quieres cambiar los colores primario y secundario, solo tienes que escribir lo siguiente en tustyles.css archivo:

/* styles.css */
:root {
  --ig-primary-500: #09f;
  --ig-secondary-500: red;
  --ig-surface-500: rgb(221 211 211);
}

Vamos a desglosar los nombres de estas variables de color. Elig prefijo está ahí como un identificador único para indicar que esta variable forma parte de un tema Ignite UI for Angular,primary es el nombre de la variable de color y500 representa la variante de color. Analizaremos más a fondo las paletas en la sección de Paletas de la documentación. Por ahora, lo único que necesitas saber es que tenemos varias variables de color base (primaria, secundaria, de superficie, éxito, información, etc.) que incluyen diferentes tonos o variantes, todos generados a partir de las variantes de color principales. Las500 variantes de color que establecemos en el ejemplo anterior se consideran el color principal de la variable y todas las demás variantes para la variable de color dada se generan a partir de la500 variante.

Cambiando estas variantes, puede 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.

Igualmente, cambiar laselevations (sombras) es igual de fácil. Incluimos 25 niveles de elevación (0-24). Aquí tienes una versión simplificada de cómo son 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);
}

Básicamente, son declaraciones CSSbox-shadow apiladas. Puedes reemplazarlos por cualquier otro valor válidobox-shadow. Cuanto mayor es el número de elevación, mayor es la sombra. De nuevo, diferentes componentes utilizan distintos niveles de elevación; para saber qué niveles de elevación utiliza cada componente, consulta la Documentación de Componentes. Analizaremos más a fondo las elevaciones en las 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 puedes cambiar el valor de la--ig-radius-factor variable. El valor predeterminado es 1, lo que significa que el factor de radio por defecto se usa entre los temas 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 puedes cambiar el valor de la--ig-elevation-factor variable. El valor por defecto es 1, lo que significa que las elevaciones predeterminadas se usan entre los temas componentes.

Ejemplo:

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

Component Variables

Todos los componentes ofrecen la capacidad de modificar sus temas usando variables CSS específicas de cada componente. Cada componente expone dos variables que modifican la misma propiedad. Las variables expuestas pueden considerarse comoglobal y.local Ambos modifican el tema del componente de la misma manera, la única diferencia es queglobal las variables tienen eligx-[component-name] prefijo asociado al nombre de la variable y pueden usarse desde los selectores padres para estilizar componentes hijos, mientras quelocal las variables son específicas de 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 avatar buscará primero la--background variable. Si se establece explícitamente, tomará su valor. En otras palabras, laslocal variables tienen mayor prioridad y solo funcionarán si se aplican directamente a laigx-avatar opción, ya sea usando su selector de etiquetas o cualquier otro selector que apunteigx-avatar. La global--igx-avatar-background puede considerarse como una variable de respaldo. Solo se usará si el local--background no es explícitamente anulado.

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 avataresAB yCD usarán el color lavanda globalmente establecido como fondo, mientras que los avataresEF yGH 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.