Temas en Ignite UI for Web Components

    Ignite UI for Web Components viene con cuatro temas distintos: Bootstrap, Material, Fluent e Indigo. Todos los temas de los 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, 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

    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 le permite cambiar los temas de los componentes en tiempo de ejecución mediante la función ConfigureTheme 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");

    [!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