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.

    Loading a Theme

    Para habilitar un tema, debe cargarse un archivo de tema. Dependiendo de la configuración de tu proyecto, puedes elegir entre ambosimport​link.

    Aquí está la lista completa de todos los temas incluidos y su ruta:

    Nombre Variante Ubicación
    **Bootstrap*- Luz igniteui-webcomponents/themes/light/bootstrap.css
    **Material*- Luz igniteui-webcomponents/themes/light/material.css
    **Fluido*- Luz igniteui-webcomponents/themes/light/fluent.css
    **Añil*- Luz igniteui-webcomponents/themes/light/indigo.css
    **Bootstrap*- Oscuro igniteui-webcomponents/themes/dark/bootstrap.css
    **Material*- Oscuro igniteui-webcomponents/themes/dark/material.css
    **Fluido*- Oscuro igniteui-webcomponents/themes/dark/fluent.css
    **Añil*- Oscuro igniteui-webcomponents/themes/dark/indigo.css

    Runtime Theme Switching

    [!Note] Changing the theme at runtime also requires you to replace the global stylesheet from the table above.

    Ignite UI for Web Components permite cambiar los temas componentes en tiempo de ejecución usando laConfigureTheme función exportada por la biblioteca.

    Llamarlo y pasar uno de los cuatro temas válidos -bootstrap,material,fluent, oindigo como cadena cambiará los estilos de componentes cargados;

    import { configureTheme } from "igniteui-webcomponents";

// Sets material as the theme to be used by all components
configureTheme("material");

    [!Note] This only tells components to switch their internal styles to the desired theme, you should also switch the global theme file to one of the listed files above.

    API References

    • ConfigureTheme