Descripción general del componente de insignia Angular

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

Angular Badge Example

Getting Started with Ignite UI for Angular Badge

Para comenzar con 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 a la Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxBadgeModule en su archivo app.module.ts.

// app.module.ts

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

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

Alternativamente, a partir de 16.0.0 puede importar IgxBadgeComponent como una dependencia independiente.

// home.component.ts

...
import { IgxBadgeComponent } from 'igniteui-angular';
// 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 ha importado el módulo o componente Ignite UI for Angular Badge, puede comenzar con una configuración básica del componente igx-badge.

Using the Angular Badge Component

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

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

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

export class AppModule {}

Alternativamente, a partir de 16.0.0, puede importar IgxBadgeComponent e IgxAvatarComponent como dependencias 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 a través del atributo shape estableciendo su valor en square. Por defecto, la forma de la insignia es rounded.

<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 se puede controlar mediante la--size variable. Se asegurará de que el tamaño de la insignia sea proporcional en ambas direcciones. Sin embargo, tenga en cuenta que las insignias que contienen valores de texto utilizan el estilo de tipografía para el tamaño de fuente y la caption altura de línea. Por esa razón, al establecer el--size de una insignia que contiene texto en valores inferiores a 16 px, también deberá modificar su tipografía.

Example:

igx-badge {
  --size: 12px;

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

Badge Icon

Además de los íconos de materiales, el componente igx-badge también admite el uso de Material Icons Extended y cualquier otro conjunto de íconos personalizados. Para agregar un ícono del conjunto extendido de íconos de materiales dentro de su componente de insignia, primero debe 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>

Badge in List

Ampliemos el ejemplo anterior y creemos una lista con 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, fuera de línea o ausente). Para lograr esto, utilizamos los componentes igx-badge e igx-avatar. Para un contenedor, se utiliza igx-list.

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

// app.module.ts

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

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

Note

La igx-badge tiene entradas icon y type para configurar la apariencia de la insignia. Puede configurar el ícono proporcionando su nombre en el conjunto de íconos de materiales oficiales. El tipo de insignia se puede configurar como default, info, success, warning o error. Dependiendo del tipo, se aplica un color de fondo específico.

En nuestro ejemplo, icon y type están vinculados a propiedades del modelo denominadas icon y type.

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

Para comenzar a diseñar las insignias, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

@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 simple, creamos un nuevo tema que extiende el badge-theme y acepta algunos parámetros que dan estilo a los elementos de la insignia.

$custom-badge-theme: badge-theme(
    $border-color: white,
    $border-width: 1px,
    $icon-color: white,
    $text-color: black,
    $shadow: 3px 2px 5px 0px rgba(0,0,0,0.4)
);

Including Themes

El último paso es incluir el tema del componente en nuestra aplicación.

Si $legacy-support está configurado en true, incluya el tema del componente así:

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

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep

:host {
     ::ng-deep {
        @include badge($custom-badge-theme);
    }
}

Si $legacy-support está configurado en false (predeterminado), incluya las variables CSS del componente así:

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

Note

Si el componente utiliza una ViewEncapsulation Emulated, aún debe usar:host porque necesita un selector global para anular las variables.

:host {
    @include css-vars($custom-badge-theme);
}

No olvide incluir los temas de la misma manera que se demostró anteriormente.

Demo

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 de insignia Angular

Angular Badge Example

Getting Started with Ignite UI for Angular Badge

Using the Angular Badge Component

Badge Shape

Badge Size

Badge Icon

Badge in List

Note

Estilismo

Including Themes

Note

Note

Demo

API References

Theming Dependencies

Additional Resources

Tematización