Tematización Bootstrap

El motor de temática Ignite UI for Angular brinda la oportunidad de usarse junto con otras bibliotecas de componentes, como el popular NG Bootstrap basado en el marcado y CSS de Bootstrap.

Descripción general

Ignite UI for Angular es un conjunto completo de widgets de UI basados en materiales, componentes y kits de UI Sketch y directivas de soporte para Angular que permite a los desarrolladores crear aplicaciones modernas de alto rendimiento. Nuestro motor de temas es fácil de usar y permite granularidad de temas en diferentes niveles desde un solo componente, múltiples componentes o todo el conjunto. Por lo tanto, algunos usuarios quieren aprovecharlo no sólo con los componentes Ignite UI sino también con otras bibliotecas. En este artículo, analizaremos el uso de Ignite UI junto con los componentes de Ng Bootstrap.

Demo

Basic Usage

Add NG Bootstrap

Si está utilizando Angular CLI y tiene un proyecto Angular existente, puede instalar NG Bootstrap con el siguiente comando:

ng add @ng-bootstrap/ng-bootstrap

Una vez instalado, debe importar el módulo principal de NG Bootstrap a su archivo app.module.ts:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    imports: [
        ...,
        NgbModule,
        ...
    ]
)}

En este punto, sus aplicaciones están listas para usar los componentes de NG Bootstrap. Puede encontrar más información sobre el uso de la biblioteca Bootstrap en su official documentation.

Add Ignite UI for Angular

Para instalar el paquete Ignite UI for Angular junto con todas sus dependencias, importaciones de fuentes y referencias de estilos, ejecute el siguiente comando en su proyecto:

ng add igniteui-angular

Luego, puede usar los componentes Ignite UI importando sus respectivos módulos en su archivo app.module.ts:

// manually addition of the Igx Avatar component 
import { IgxAvatarModule } from 'igniteui-angular';
// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...,
        IgxAvatarModule,
        ...
    ]
)}

Siga nuestro tema Getting Started una introducción completa sobre el uso Ignite UI for Angular en proyectos existentes. Puede encontrar más información sobre cómo importar y utilizar cada uno de nuestros componentes junto con ejemplos guiados en la documentación del componente.

Components

Veamos cómo se hace nuestra muestra de demostración. Es una mezcla de componentes Ignite UI y NG Bootstrap, diseñados para encajar perfectamente en una sola aplicación. La navegación en nuestro ejemplo se crea usando la navbar bootstrap junto con igx-buttons e igx-avatar. El dropdown debajo del botón Campañas también se toma de la biblioteca de arranque. Debajo de la navegación, estamos usando el componente igx-card para mostrar algunas estadísticas. Dentro de las tarjetas, hemos colocado varios elementos: igx-avatars e igx-icons así como buttons de arranque y ngb-ratings.

Al hacer clic en los botones More, verá el igx-dialog:

A continuación, agregamos un ngb-accordion que muestra información sobre tarjetas de crédito. Dentro de su contenido, hay una igx-list y igx-button.

Finalmente, insertamos un icon button Ignite UI for Angular en la esquina superior derecha, que cambia el tema de toda la aplicación:

Estilismo

Para comenzar a diseñar componentes utilizando el motor de temas Ignite UI, cree un archivo scss con el nombre de su elección que sería el archivo base para su tema global. Llamaremos a este archivo_variables.scss. A continuación, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

// _variables.scss
@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

paletas

La biblioteca Bootstrap utiliza un mapa de Sass llamado $theme-colors para proporcionar una paleta compuesta de ocho colores:

$theme-colors: (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
);

La función palette Ignite UI for Angular genera un mapa de paleta de colores que incluye colores primary, secondary, gray, info, success, warn y error y sus variantes de color. Nuestra paleta bootstrap predefinida a su vez consta de siete colores:

$bootstrap-palette: palette(
    $primary: #0d6efd,
    $secondary: #6c757d,
    $info: #0dcaf0,
    $success: #198754,
    $warn: #ffc107,
    $error: #dc3545,
    $surface: #f8f9fa
);

Como puede ver, la mayoría de los colores de la paleta Bootstrap se superponen con los colores definidos en la paleta Bootstrap de Ignite UI for Angular. Por lo tanto, podemos simplemente asignar los colores del tema Bootstrap a los colores de nuestra paleta de arranque claro u oscuro.

Primero, vamos a definir variables Sass que extraen valores de la $light-bootstrap-palette:

// Colors from the Ignite UI light bootstrap color palette
$light-primary: color($light-bootstrap-palette, "primary");
$light-secondary: color($light-bootstrap-palette, "secondary");
$light-success: color($light-bootstrap-palette, "success");
$light-info: color($light-bootstrap-palette, "info");
$light-warning: color($light-bootstrap-palette, "warn");
$light-danger: color($light-bootstrap-palette, "error");

Después de eso, crearemos una nueva paleta de colores que se usará para el modo oscuro de la muestra:

// Defining custom color palette
$custom-dark-palette: palette(
    $primary: #ecaa53,
    $secondary: #011627,
    $gray: #fff,
    $surface: #222
);

// Creating Sass variables for primary and secondary colors
$dark-primary: color($custom-dark-palette, "primary");
$dark-secondary: color($custom-dark-palette, "secondary");

Note

Visite nuestra sección palettes with Sass para descubrir más sobre las paletas proporcionadas por Ignite UI for Angular y aprender cómo crear una nueva.

Themes

Para cambiar entre el modo light y dark, estamos agregando una clase personalizada al elemento host que se cambiará al hacer clic en el botón. En nuestro archivo de hoja de estilo, incluiremos diferentes paletas de colores específicas para cada clase.

Modo de luz

Ignite UI for Angular viene con temas predefinidos inspirados en la biblioteca Bootstrap 4. Para usarlos, primero debe incluir nuestro mixin core y luego nuestro mixin de temas incorporado: bootstrap-light-theme. También usaremos nuestra paleta de arranque predefinida: $light-bootstrap-palette.

El color de fondo de nuestra aplicación debe establecerse explícitamente en el elemento host. En nuestro ejemplo, queremos usar el color surface de la paleta pasada.

En este punto tenemos que modificar el mapa Bootstrap $theme-colors con las variables Sass que creamos anteriormente:

// Make sure you always include thecore mixin first
@include core();

:host {
    &.light {
        // The background color of the application in light mode
        background: color($light-bootstrap-palette, 'surface');

        ::ng-deep {
            // Applying the igx predefined light bootstrap palette and theme
            @include bootstrap-light-theme($light-bootstrap-palette);

            $theme-colors: (
                "primary": $light-primary,
                "secondary": $light-secondary,
                "success": $light-success,
                "info": $light-info,
                "warning": $light-warning,
                "danger": $light-danger
            );
        }
    }
}

Los colores light y dark del mapa $theme-colors, que no tienen valores correspondientes en las paletas Ignite UI, también se pueden reemplazar con valores a nuestra discreción. Por ejemplo:

$custom-light: color($light-bootstrap-palette, "gray", 100);
$custom-dark: color($light-bootstrap-palette, "gray", 800);

:host {
    &.light {
        ::ng-deep {
            $theme-colors: (
                "light": $custom-light,
                "dark": $custom-dark,
            );
        }
    }
}

modo oscuro

Para nuestra variante oscura, usaremos nuestra $custom-dark-palette recién creada. Tenemos que incluirlo en los estilos de clase dark y también modificar el mapa $theme-colors con los nuevos valores.

Todos los componentes de Ignite UI for Angular usan colores de la paleta pasada, por lo que encajan muy bien en el modo oscuro sin ningún ajuste adicional. Sin embargo, tenemos que hacer algunos cambios de estilo más para los componentes ng-bootstrap:

:host {
    &.dark {
        // The background color of the application in dark mode
        background: color($custom-dark-palette, 'surface');

        ::ng-deep {
            // Applying our custom dark palette 
            @include bootstrap-dark-theme($custom-dark-palette);

            // Overriding bootstrap button colors with colors from the custom dark palette
            .igx-card-actions .btn-primary {
                background-color: $dark-primary;
                border-color: $dark-primary;

                &:hover {
                    background-color: color($custom-dark-palette, 'primary', 600);
                }
            }

            // Overriding ngb-accordion colors with colors from the custom dark palette
            .accordion {
                .card-header {
                    background-color: color($custom-dark-palette, 'gray', 200);
                    color: color($custom-dark-palette, 'gray', 900);
                }

                .card {
                    background-color: color($custom-dark-palette, 'surface');
                    border-color: color($custom-dark-palette, 'gray', 300);
                }
            }

            // Overriding bootstrap dropdown colors with colors from the custom dark palette
            .dropdown .dropdown-menu {
                background-color: color($custom-dark-palette, 'surface');
                border-color: color($custom-dark-palette, 'gray', 300);

                .dropdown-item {
                    color: color($custom-dark-palette, 'gray', 800);

                    &:hover {
                        background-color: color($custom-dark-palette, 'gray', 200);
                    }
                }
            }
            
            // Modifying the bootstrap color map
            $theme-colors: (
                "primary": $dark-primary,
                "secondary": $dark-secondary
            );
        }
    }
}

Por último, necesitamos importar la biblioteca Bootstrap; ¡impórtela siempre al final!

:host {
    ::ng-deep {
        // Importing Bootstrap .scss file
        // Make sure you always import it last
        @import "~bootstrap/scss/bootstrap";
    }
}

Una vez que hayamos terminado de modificar el mapa $theme-colors, los componentes bootstrap ya usarán los colores de igx $light-bootstrap-palette para el modo claro y $custom-dark-palette para el modo oscuro.

Warning

Asegúrese de colocar el código anterior dentro del selector::ng-deep para penetrate en Emulated ViewEncapsulation.

Generate class

La navbar de arranque usa clases CSS para su color de fondo. En nuestra muestra, queremos que ese color cambie según el tema seleccionado, por lo tanto, usaremos la combinación color-classes. Generará nombres de clases CSS para todos los colores de una propiedad y paleta de colores determinada, con prefijos y sufijos opcionales adjuntos al nombre de la clase. Para la demostración, incluiremos el mixin dos veces: una para el modo claro con la respectiva $light-bootstrap-palette como primer valor y una segunda vez para el modo oscuro con la $custom-dark-palette:

:host {
    &.light {
        @include color-classes(
            $palette: $light-bootstrap-palette,
            $prop: 'background',
            $prefix: 'bg'
        );
    }

    &.dark {
        @include color-classes(
            $palette: $custom-dark-palette,
            $prop: 'background',
            $prefix: 'bg'
        );
    }
}

Luego, agregue una clase CSS a su componente de barra de navegación siguiendo el patrón "bg - color de la paleta - variante de color". En nuestra aplicación de muestra, usamos bg-gray-200.

Tipografía

Ignite UI for Angular expone cuatro escalas de tipo predeterminadas para cada uno de sus temas, que se pueden usar dentro del mixin typography para definir los estilos de tipografía globales de una aplicación. En nuestro ejemplo, vamos a aplicar el typeface y type-scale predefinidos de bootstrap, pero puedes crear otros personalizados si lo deseas.

:host {
    @include typography($font-family: $bootstrap-typeface, $type-scale: $bootstrap-type-scale);
}

API References

• Paleta Bootstrap ligera
• Paleta Bootstrap oscura
• Tema Bootstrap ligero
• Tema oscuro de Bootstrap
• Función de paleta
• Tipografía Mixin

Temas relacionados:

• paletas
• Temas de componentes
• Tipografía
• Componente de avatar
• Componente de botón
• Componente de diálogo
• Componente de icono
• Componente de lista

Additional Resources

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

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub