Configuración
Legacy Support
El desarrollo de Ignite UI for Angular comenzó en 2016, cuando Internet Explorer 11 todavía era relevante. Algunos de nuestros usuarios dependen de IE11 hasta el día de hoy. Nuestro motor de temas se creó de una manera que le permite producir estilos tanto para navegadores antiguos como para navegadores antiguos, utilizando la misma API. Le permitimos configurar cómo se comporta el motor en función de una única variable global: $igx-legacy-support. De forma predeterminada, está configurado en false, pero puedes ocultar su declaración. El valor de esta variable también se establece implícitamente cuando especifica el parámetro $legacy-support en el mixin theme.
Warning
La opción $legacy-support se eliminó en igniteui-angular 13.0.x. La compatibilidad con IE11 y navegadores heredados se eliminó en la versión 13 y esta opción ya no es válida.
Example:
// Sets the global $igx-legacy-support variable to true
@include theme(
$legacy-support: true
);
Esta es la forma predeterminada de desactivar la compatibilidad heredada para el tema que estás creando en tu archivo styles.scss. Si tiene estilos destinados a componentes específicos, como el archivo app.component.scss, también deberá especificar allí el soporte heredado.
// app.component.scss
$igx-legacy-support: true;
$color: color($light-material-palette, 'primary', 900);
Le recomendamos que cree un archivo_variables.scss en el directorio styles de su proyecto donde almacena todas sus variables de configuración global. De esta manera, puedes simplemente importar tu configuración en cada archivo de estilo.
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
La Ignite UI for Angular incluye estilos de barra de desplazamiento personalizados que le permiten cambiar el ancho y/o los colores de todas las barras de desplazamiento en su aplicación. Para aplicar los estilos incluidos, asegúrese de configurar la clase ig-scrollbar en un elemento que contenga el componente raíz de su aplicación.
Para personalizar aún más la barra de desplazamiento, puede crear un nuevo tema que extienda el scrollbar-theme existente y acepte los parámetros $schema, $thumb-background, $track-background y $scrollbar-size.
// app.component.scss
$my-scrollbar-theme: scrollbar-theme($thumb-background: black, $track-background: gray);
@include scrollbar($my-scrollbar-theme);
Los parámetros también se pueden aplicar directamente a la función de la barra de desplazamiento para evitar la creación de temas adicionales.
// app.component.scss
@include scrollbar(scrollbar-theme($scrollbar-size: 16px));
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.
GitHub