Temas em Ignite UI for Web Components

    Ignite UI for Web Components vem com quatro temas distintos - Bootstrap, Material, Fluent e Indigo. Todos os temas de componentes são incorporados aos componentes, no entanto, um arquivo de estilo global é necessário para que paletas, tipografia e outras configurações globais funcionem.

    Loading a Theme

    Para habilitar um tema, um arquivo de tema deve ser carregado. Dependendo da configuração do seu projeto, você pode ou import​ ​link.

    Aqui está a lista completa de todos os temas agrupados e seu caminho:

    Nome Variante Localização
    Bootstrap Luz igniteui-webcomponentes/temas/luz/bootstrap.css
    Material Luz igniteui-webcomponentes/temas/luz/material.css
    Fluente Luz igniteui-webcomponentes/temas/luz/fluent.css
    Anil Luz igniteui-webcomponentes/temas/luz/indigo.css
    Bootstrap Escuro igniteui-webcomponents/temas/escuro/bootstrap.css
    Material Escuro igniteui-webcomponents/themes/dark/material.css
    Fluente Escuro igniteui-webcomponentes/temas/escuro/fluent.css
    Anil Escuro igniteui-webcomponents/temas/escuro/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 alternar os temas do componente em tempo de execução usando a função exportada ConfigureTheme pela biblioteca.

    Chamá-lo e passar um dos quatro temas válidos -bootstrap, material, fluent, ou indigo como uma string alterará os estilos de componentes carregados;

    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