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

    Los temas de Ignite UI for Angular vienen con estilos personalizados de barras de desplazamiento que permiten cambiar el ancho y/o los colores de todas las barras de desplazamiento en tu aplicación. Para aplicar los estilos incluidos, asegúrate de establecer laig-scrollbar clase en un elemento que contenga el componente raíz de tu app.

    Para personalizar aún más la barra de desplazamiento, puedes crear un nuevo estilo de barra de desplazamiento con estascrollbar-theme función. La función acepta argumentos para cambios de estilo en la barra de desplazamiento. Podemos personalizar el tamaño de la barra de desplazamiento, el color, el borde, la altura mínima... y muchos más.

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