Configuración

    La biblioteca de temas de Ignite UI for Angular expone varios argumentos de entrada, variables que permiten configurar el funcionamiento del motor de temas.

    Global Variables

    Aquí hay una lista de variables globales de Sass enviadas en el módulo de temas principal:

    Nombre de la variable Descripción
    $components Almacena un registro de todos los temas componentes. Se utiliza para sacudir árboles.
    $dropped-themes Almacena un registro de temas eliminados. Se utiliza para sacudir árboles.

    Scrollbar Styling

    The Ignite UI for Angular themes ship with custom scrollbar styles that allow you to change the width and/or the colors of all scrollbars in your application. To apply the included styles, make sure to set the ig-scrollbar class to an element that contains your root app component.

    To customize the scrollbar further, you can create a new scrollbar style with the scrollbar-theme function. The function accepts arguments for style changes on the scrollbar. We can customize the scrollbar size, color, border, min-height... and many more.

    // 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

    Aprende los conceptos:

    Aprenda a crear temas para toda la aplicación:

    Aprenda a crear temas específicos de componentes:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.