Temas en Ignite UI for Web Components
Ignite UI for Web Components se envía con cuatro temas distintos: Bootstrap, Material, Fluent e Indigo. Todos los temas de componentes están integrados en los componentes, sin embargo, se requiere un archivo de estilo global para que funcionen las paletas, la tipografía y otras configuraciones globales.
Cargando un tema
Para habilitar un tema, se debe cargar un archivo de tema. Dependiendo de la configuración de su proyecto, puede import
o link
.
Aquí está la lista completa de todos los temas incluidos y su ruta:
Nombre | Variante | Ubicación |
---|---|---|
Oreja | Luz | igniteui-webcomponents/themes/light/bootstrap.css |
Material | Luz | igniteui-webcomponents/themes/light/material.css |
Fluido | Luz | igniteui-webcomponents/themes/light/fluent.css |
Índigo | Luz | igniteui-webcomponents/themes/light/indigo.css |
Oreja | Oscuro | igniteui-webcomponents/themes/dark/bootstrap.css |
Material | Oscuro | igniteui-webcomponents/themes/dark/material.css |
Fluido | Oscuro | igniteui-webcomponents/themes/dark/fluent.css |
Índigo | Oscuro | igniteui-webcomponents/themes/dark/indigo.css |
Cambio de tema en tiempo de ejecución
Cambiar el tema en tiempo de ejecución también requiere que reemplace la hoja de estilo global de la tabla anterior.
Ignite UI for Web Components le permite cambiar los temas de los componentes en tiempo de ejecución mediante la ConfigureTheme
función exportada por la biblioteca.
Llamarlo y pasar uno de los cuatro temas válidos (bootstrap, material, fluent o indigo como cadena) cambiará los estilos de los componentes cargados;
import { configureTheme } from "igniteui-webcomponents";
// Sets material as the theme to be used by all components
configureTheme("material");
ts
Esto solo le indica a los componentes que cambien sus estilos internos al tema deseado; también debe cambiar el archivo de tema global a uno de los archivos enumerados anteriormente.
Referencias de API
ConfigureTheme