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.

    Ignite UI for Web Components | CTA Banner

    Referencias de API

    • ConfigureTheme