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
¿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:

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
- 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
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.