Descripción general del componente Angular Badge

Angular Badge es un componente que se utiliza junto con avatares, menús de navegación u otros componentes de una aplicación cuando se necesita una notificación visual. Las insignias suelen estar diseñadas como íconos con un estilo predefinido para comunicar información, éxito, advertencias o errores.

Angular Badge Example

Getting Started with Ignite UI for Angular Badge

Para empezar a utilizar el componente Ignite UI for Angular Badge, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxBadgeModule en tu archivo app.module.ts.

// app.module.ts

...
import { IgxBadgeModule } from 'igniteui-angular/badge';
// import { IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxBadgeModule],
    ...
})
export class AppModule {}

Alternativamente,16.0.0 puedes importarlosIgxBadgeComponent como una dependencia independiente.

// home.component.ts

...
import { IgxBadgeComponent } from 'igniteui-angular/badge';
// import { IgxBadgeComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-badge icon="check" type="success" shape="square"></igx-badge>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxBadgeComponent]
})
export class HomeComponent {}

Ahora que tienes importado el módulo o componente de Ignite UI for Angular Badge, puedes empezar con una configuración básica deligx-badge componente.

Using the Angular Badge Component

Veamos cómo se hace la muestra de la demo. Es una simple insignia de éxito en un avatar. Para construir eso, necesitamos importar elIgxAvatarModule, junto con elIgxBadgeModule:

// app.module.ts
...
import { IgxBadgeModule } from 'igniteui-angular/badge';
import { IgxAvatarModule } from 'igniteui-angular/avatar';
// import {  IgxBadgeModule, IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package

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

export class AppModule {}

Alternativamente,16.0.0 puedes importar lasIgxBadgeComponent dependencias de andIgxAvatarComponent como independientes.

A continuación, agregaremos esos componentes a nuestra plantilla:

<div class="wrapper">
    <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
    <igx-badge icon="check" type="success"></igx-badge>
</div>

Usando el wrapper posicionaremos la insignia de manera absoluta, cubriendo un poco el avatar:

.wrapper {
  position: relative;
  margin-top: 15px;
}

igx-badge {
  position: absolute;
  bottom: 0;
  left: 28px;
}

Badge Shape

Podemos cambiar la forma de la insignia estableciendo su valor enshape elsquare atributo. Por defecto, la forma de la insignia lo esrounded.

<igx-badge icon="check" type="success" shape="square"></igx-badge>

Si todo se hace correctamente, debería ver la muestra de demostración que se muestra arriba en su navegador.

Badge Size

El tamaño de la insignia puede controlarse usando la--size variable. Esto asegurará que la insignia tenga tamaños proporcionales en ambas direcciones. Ten en cuenta, sin embargo, que las insignias que contienen valores de texto utilizan elcaption estilo tipográfico para el tamaño de la fuente y la altura de la línea. Por esa razón, al poner valores--size inferiores a 16px de una insignia que contiene texto, también tendrás que modificar su tipografía.

Ejemplo:

igx-badge {
  --size: 12px;

  font-size: calc(var(--size) / 2);
  line-height: normal;
}

Badge Icon

Además de los iconos de material, eligx-badge componente también soporta el uso de Material Icons Extended y cualquier otro conjunto de iconos personalizado. Para añadir un icono del conjunto de iconos de materiales extendidos dentro de tu componente de insignia, primero tienes que registrarlo:

export class BadgeIconComponent implements OnInit { 
    constructor (protected _iconService: IgxIconService) {}

    public ngOnInit() {
        this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
    }
}

Luego, simplemente especifique el nombre del ícono y la familia de la siguiente manera:

<igx-badge icon="heart-monitor" iconSet="imx-icons"></igx-badge>

Dot Badge

The igx-badge component can also render as a minimal dot indicator for notifications by enabling its dot property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).

Badge in List

Ampliemos la muestra anterior y creemos una lista de contactos, similar a las de los clientes de chat. Además del nombre del contacto, queremos mostrar un avatar y el estado actual del contacto (en línea, offline o fuera). Para lograrlo, estamos utilizando losigx-badge componentes y (yigx-avatar componentes). Para un contenedor,igx-list se usa.

Para continuar, incluya todos los módulos necesarios e impórtelos en el archivo app.module.ts.

// app.module.ts

...
import { IgxListModule } from 'igniteui-angular/list';
import { IgxAvatarModule } from 'igniteui-angular/avatar';
import { IgxBadgeModule } from 'igniteui-angular/badge';
// import { IgxListModule, IgxAvatarModule, IgxBadgeModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxListModule, IgxAvatarModule, IgxBadgeModule],
})
export class AppModule {}

Note

Losigx-badge tieneicon ytype las entradas para configurar el aspecto de la insignia. Puedes configurar el icono proporcionando su nombre desde el conjunto oficial de iconos de material. El tipo de insignia puede configurarse como quedefault,info,successwarning,, oerror bien. Dependiendo del tipo, se aplica un color de fondo específico.

En nuestra muestra,icon ytype están vinculados a propiedades del modelo llamadas icono y tipo.

A continuación, agregamos los contactos en nuestra plantilla:

<!-- contacts.component.html -->

<igx-list>
  <igx-list-item isHeader="true">
    Team Members (4)
  </igx-list-item>
  <igx-list-item *ngFor="let member of members">
    <div class="wrapper">
      <div>
        <igx-avatar icon="person" shape="circle" size="small"></igx-avatar>
        <igx-badge [icon]="member.icon" [type]="member.type" class="badge-style"></igx-badge>
      </div>
      <div class="contact-container">
        <span class="contact-name">{{ member.name }}</span>
      </div>
    </div>
  </igx-list-item>
</igx-list>

Vamos a crear nuestros miembros en el archivo mecanografiado de esta manera:

// contacts.component.ts

...
 public members: Member[] = [
    new Member('Terrance Orta', 'online'),
    new Member('Donna Price', 'online'),
    new Member('Lisa Landers', 'away'),
    new Member('Dorothy H. Spencer', 'offline'),
  ];


...
class Member {
    public name: string;
    public status: string;
    public type: string;
    public icon: string;

    constructor(name: string, status: string) {
        this.name = name;
        this.status = status;
        switch (status) {
            case 'online':
                this.type = 'success';
                this.icon = 'check';
                break;
            case 'away':
                this.type = 'warning';
                this.icon = 'schedule';
                break;
            case 'offline':
                this.type = 'error';
                this.icon = 'remove';
                break;
        }
    }
}

Coloque la insignia en su contenedor principal:

/* contacts.component.css */

.wrapper {
    display: flex;
    flex-direction: row;
}

.contact-name {
    font-weight: 600;
}

.contact-container {
    margin-left: 20px;
}

.badge-style {
  position: absolute;
  bottom: 2.5px;
  left: 40px;
}

Si la muestra está configurada correctamente, se debe mostrar una lista de miembros y cada miembro tiene un avatar y una insignia que muestra su estado actual.

Estilismo

Badge Theme Property Map

Cambiar la$background-color propiedad actualiza automáticamente las siguientes propiedades dependientes:

Propiedad principal	Propiedad dependiente	Descripción
$background color	$icon color	El color usado para los iconos en la insignia.
	$text-color	El color que se usa para el texto en la insignia.

Para empezar a estilizar las insignias, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:

@use "igniteui-angular/theming" as *;

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

Siguiendo el enfoque más sencillo, creamos un nuevo tema que amplía ybadge-theme acepta algunos parámetros que estilizan los objetos de la insignia. Cuando configuras el$background-color, los$icon-color y$text-color se asignan automáticamente según cuál ofrece mejor contraste: blanco o negro. Ten en cuenta que la$border-radius propiedad solo entra en vigor cuando la insigniashape está configurada ensquare.

$custom-badge-theme: badge-theme(
  $background-color: #57a5cd,
  $border-radius: 4px
);

Para incluir el nuevo tema usamos elcss-vars mixin:

@include css-vars($custom-badge-theme);

Demo

Styling with Tailwind

Puedes decorarlosbadge usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

El archivo de utilidad incluye variantes tantolight comodark de tema.

Usalight-* clases para el tema ligero.
Usadark-* clases para el tema oscuro.
Añadir el nombre del componente después del prefijo, por ejemplo, ,light-badge,dark-badge.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el tema de la insignia. La sintaxis es la siguiente:

<igx-badge
class="!light-badge ![--background:#FF4E00] ![--border-radius:4px]">
</igx-badge>

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.

Al final, tus insignias deberían verse así:

API References

Theming Dependencies

Tema IgxIcon

Additional Resources

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

Descripción general del componente Angular Badge

Angular Badge Example

Getting Started with Ignite UI for Angular Badge

Using the Angular Badge Component

Badge Shape

Badge Size

Badge Icon

Dot Badge

Badge in List

Note

Estilismo

Badge Theme Property Map

Demo

Styling with Tailwind

Note

API References

Theming Dependencies

Additional Resources

Tematización