Tematización Bootstrap

    El motor de temas de Ignite UI for Angular ofrece la oportunidad de ser utilizado junto con otras bibliotecas de componentes, como la popular NG Bootstrap basada en el marcado y CSS de Bootstrap.

    Descripción general

    El Ignite UI for Angular es un conjunto completo de widgets de interfaz de usuario basados en material, componentes y kits de interfaz de usuario 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 la granularidad de temas en diferentes niveles desde un solo componente, varios componentes o toda la suite. Por lo tanto, algunos usuarios quieren aprovecharlo no solo con Ignite UI componentes, sino también con otras bibliotecas. En este artículo, veremos el uso de Ignite UI junto con los componentes de Ng Bootstrap.

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso básico

    Agregar 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
    cmd

    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,
            ...
        ]
    )}
    ts

    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.

    Añade 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 el proyecto:

    ng add igniteui-angular
    cmd

    Luego, puedes usar los componentes Ignite UI importando sus respectivos módulos en tu 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,
            ...
        ]
    )}
    ts

    Siga nuestro Getting Started tema para obtener una introducción completa sobre el uso de 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.

    Componentes

    Veamos cómo se hace nuestro ejemplo de demostración. Es una mezcla de componentes Ignite UI y NG Bootstrap, diseñados para encajar perfectamente en una aplicación. La navegación en nuestro ejemplo se crea utilizando la navbar de Bootstrap junto con igx-buttons e igx-avatar. El dropdown debajo del botón Campañas también se toma de la biblioteca de Bootstrap. Debajo de la barra de navegación, estamos utilizando 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 Bootstrap 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 Ignite UI for Angular icon button en la esquina superior derecha, que cambia el tema de toda la aplicación:

    App Builder | CTA Banner

    Estilo

    Para comenzar a diseñar componentes con el motor de temas Ignite UI, crea un archivo scss con el nombre que elijas que será el archivo base para tu tema global. Llamaremos a este archivo_variables.scss. A continuación, debemos 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';
    scss

    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
    );
    scss

    Ignite UI for Angular 's palette genera un mapa de paleta de colores que incluye primary, secondary, gray, info, success, warn y error colores y sus variantes de color. Nuestra paleta de 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
    );
    scss

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

    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");
    scss

    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");
    scss

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

    Temas

    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 de Bootstrap 4. Para usarlos, primero, tienes que incluir nuestro core mixin y luego nuestro mixin de tema incorporado -bootstrap-light-theme. También haremos uso de nuestra paleta de bootstrap 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
                );
            }
        }
    }
    scss

    Los colores light y dark del mapa $theme-colors, que no tienen valores correspondientes en las paletas de la Ignite UI, también se pueden reemplazar con valores a nuestro criterio. 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,
                );
            }
        }
    }
    scss

    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 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
                );
            }
        }
    }
    scss

    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";
        }
    }
    scss

    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.

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

    generar clase

    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'
            );
        }
    }
    scss

    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 de la typography mezcla para definir los estilos de tipografía globales de una aplicación. En nuestro ejemplo, vamos a aplicar el bootstrap predefinido typeface y type-scale pero puedes crear unos personalizados si lo deseas.

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

    Referencias de API

    Temas relacionados:

    Recursos adicionales

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