Configuração

    A biblioteca de temas Ignite UI for Angular expõe diversas variáveis de argumentos de entrada que permitem configurar como o mecanismo de temas funciona.

    Global Variables

    Aqui está uma lista de variáveis globais do Sass encaminhadas no módulo de tema principal:

    Nome da Variável Descrição
    $components Armazena um registro de todos os temas componentes. Usado para tree-shaking.
    $dropped-themes Armazena um registro de temas descartados. Usado para tree-shaking.

    Scrollbar Styling

    Os temas Ignite UI for Angular vêm com estilos personalizados de barra de rolagem que permitem alterar a largura e/ou as cores de todas as barras de rolagem do seu aplicativo. Para aplicar os estilos incluídos, certifique-se de definir aig-scrollbar classe para um elemento que contenha o componente raiz da sua app.

    Para personalizar ainda mais a barra de rolagem, você pode criar um novo estilo de barra de rolagem com essascrollbar-theme função. A função aceita argumentos para mudanças de estilo na barra de rolagem. Podemos personalizar o tamanho da barra de rolagem, cor, borda, altura mínima... e muitos outros.

    // app.component.scss
// Here we set the scrollbar to have size of 16px, scrollbar thumb to be in color pink, and scrolblar track to be in color green
$my-scrollbar-theme: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: pink, $sb-track-bg-color: green);

// We use 'css-vars' mixin for generating the css variables with the new scrollbar values.
@include css-vars($my-scrollbar-theme);

    Additional Resources

    Aprenda os conceitos:

    Aprenda a criar temas para todo o aplicativo:

    Aprenda a criar temas específicos para componentes:

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.