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.

Ejemplo de insignia Angular

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular';

@Component({
    selector: 'app-badge-sample-2',
    styleUrls: ['./badge-sample-2.component.scss'],
    templateUrl: './badge-sample-2.component.html',
    imports: [IgxAvatarComponent, IgxBadgeComponent]
})
export class BadgeSample2Component { }
tsコピー

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

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

igx-badge {
  position: absolute;
  bottom: 0;
  left: 28px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Primeros pasos con Ignite UI for Angular insignia

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
cmd

Para obtener una introducción completa al 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 {}
typescript

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 {}
typescript

Ahora que ha importado el módulo o componente Ignite UI for Angular Badge, puede comenzar con una configuración básica del igx-badge componente.

Uso del componente Angular Badge

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 {}
typescript

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>
html

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

Forma de la insignia

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>
html

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

Tamaño de la insignia

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.

Ejemplo:

igx-badge {
  --size: 12px;

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

Icono de insignia

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

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

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

EXAMPLE

TS

HTML

SCSS

import { Component, OnInit } from '@angular/core';
import { heartMonitor } from '@igniteui/material-icons-extended';
import { IgxIconService, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular';

@Component({
    selector: 'app-badge-icon',
    styleUrls: ['./badge-icon.component.scss'],
    templateUrl: './badge-icon.component.html',
    imports: [IgxAvatarComponent, IgxBadgeComponent]
})
export class BadgeIconComponent implements OnInit { 
    constructor (protected _iconService: IgxIconService) {}

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

<div class="wrapper">
    <igx-avatar icon="face" size="small" shape="rounded"></igx-avatar>
    <igx-badge type="error" icon="heart-monitor" iconSet="imx-icons"></igx-badge>
</div>htmlコピー

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

igx-badge {
  position: absolute;
  bottom: 0;
  left: 28px;
}
scssコピー

Edit in: CodesandboxStackBlitz

Insignia en la lista

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 {}
typescript

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>
html

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'),
  ];

typescript

...
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;
        }
    }
}
typescript

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

css

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.

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { Member } from '../model/member.model';
import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular';


@Component({
    selector: 'app-badge-sample-3',
    styleUrls: ['./badge-sample-3.component.scss'],
    templateUrl: './badge-sample-3.component.html',
    imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
})
export class BadgeSample3Component {
  public members: Member[] = [
    new Member('Terrance Orta', 'online'),
    new Member('Donna Price', 'online'),
    new Member('Lisa Landers', 'away'),
    new Member('Dorothy H. Spencer', 'offline')
  ];
}
tsコピー

<igx-list>
  <igx-list-item [isHeader]="true">
    Team Members (4)
  </igx-list-item>
  @for (member of members; track member) {
    <igx-list-item>
      <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>
htmlコピー

.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;
}
scssコピー

Edit in: CodesandboxStackBlitz

Estilo

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

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-radius: 15px,
  $icon-color: white,
  $text-color: black,
);
scss

Para incluir el nuevo tema usamos el css-vars mixin:

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

Manifestación

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { Member } from '../model/member.model';
import { IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent } from 'igniteui-angular';


@Component({
    selector: 'app-badge-styling-sample',
    styleUrls: ['./badge-styling-sample.component.scss'],
    templateUrl: './badge-styling-sample.component.html',
    imports: [IgxListComponent, IgxListItemComponent, IgxAvatarComponent, IgxBadgeComponent]
})
export class BadgeStylingSampleComponent {
  public members: Member[] = [
    new Member('Terrance Orta', 'online'),
    new Member('Donna Price', 'online'),
    new Member('Lisa Landers', 'away'),
    new Member('Dorothy H. Spencer', 'offline')
  ];
}
tsコピー

<igx-list>
  <igx-list-item [isHeader]="true">
    Team Members (4)
  </igx-list-item>
  @for (member of members; track member) {
    <igx-list-item>
      <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>
htmlコピー

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

$custom-badge-theme: badge-theme(
  $border-radius: 15px,
  $icon-color: white,
  $text-color: black
);

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

scssコピー

Edit in: CodesandboxStackBlitz

Referencias de API

• Componente IgxAvatar
• Componente IgxBadge
• Estilos de componentes IgxBadge
• Componente IgxList
• Componente IgxListItem
• Tipo de insignia Igx

Dependencias temáticas

• Tema IgxIcon

Recursos adicionales

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub