Visão geral do componente Angular Badge

    Angular Badge é um componente usado em conjunto com avatares, menus de navegação ou outros componentes em um aplicativo quando uma notificação visual é necessária. Os Badges geralmente são projetados como ícones com um estilo predefinido para comunicar informações, sucesso, avisos ou erros.

    Angular Badge Example

    Getting Started with Ignite UI for Angular Badge

    Para começar a usar o componente Ignite UI for Angular Badge, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

    ng add igniteui-angular

    Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

    O próximo passo é importar o IgxBadgeModule no seu arquivo 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 {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxBadgeComponent como uma dependência autônoma.

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

    Agora que você importou o módulo ou componente Ignite UI for Angular Badge, você pode começar com uma configuração básica do componente igx-badge.

    Using the Angular Badge Component

    Vamos ver como o exemplo de demonstração é feito. É um simples emblema de sucesso em um avatar. Para construir isso, precisamos importar o IgxAvatarModule, junto com o 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 {}

    Como alternativa, a partir da 16.0.0 você pode importar o IgxBadgeComponent e IgxAvatarComponent como dependências autônomas.

    Em seguida, adicionaremos esses componentes ao nosso modelo:

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

    Usando o wrapper, posicionaremos o emblema de forma absoluta, cobrindo um pouco o avatar:

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

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

    Badge Shape

    Podemos alterar o formato do emblema por meio do atributo shape definindo seu valor como square. Por padrão, o formato do emblema é rounded.

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

    Se tudo for feito corretamente, você deverá ver o exemplo de demonstração mostrado acima no seu navegador.

    Badge Size

    O tamanho do emblema pode ser controlado usando a variável--size. Ela garantirá que o emblema seja dimensionado proporcionalmente em ambas as direções. Tenha em mente, no entanto, que emblemas contendo valores de texto usam o estilo de tipografia caption para seu tamanho de fonte e altura de linha. Por esse motivo, ao definir o--size de um emblema contendo texto para valores abaixo de 16px, você também precisará modificar sua tipografia.

    Exemplo:

    igx-badge {
  --size: 12px;

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

    Badge Icon

    Além dos ícones de material, o componente igx-badge também suporta o uso do Material Icons Extended e qualquer outro conjunto de ícones personalizados. Para adicionar um ícone do conjunto de ícones de material estendidos dentro do seu componente de emblema, primeiro você precisa registrá-lo:

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

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

    Depois, basta especificar o nome do ícone e a família da seguinte forma:

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

    Badge in List

    Vamos estender o exemplo anterior e criar uma lista com contatos, semelhante àquelas em clientes de chat. Além do nome do contato, queremos exibir um avatar e o estado atual do contato (online, offline ou ausente). Para conseguir isso, estamos usando os componentes igx-badge e igx-avatar. Para um contêiner, igx-list é usado.

    Para continuar, inclua todos os módulos necessários e importe-os no arquivo 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

    O igx-badge tem entradas icon e type para configurar a aparência do emblema. Você pode definir o ícone fornecendo seu nome do conjunto de ícones de material oficial. O tipo de emblema pode ser definido como default, info, success, warning ou error. Dependendo do tipo, uma cor de fundo específica é aplicada.

    Em nosso exemplo, icon e type estão vinculados às propriedades do modelo denominadas ícone e tipo.

    Em seguida, adicionamos os contatos em nosso modelo:

    <!-- 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 criar nossos membros no arquivo typescript assim:

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

    Posicione o emblema em seu contêiner pai:

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

    Se o exemplo estiver configurado corretamente, uma lista de membros deverá ser exibida e cada membro terá um avatar e um emblema, mostrando seu estado atual.

    Estilização

    Para começar a estilizar os emblemas, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

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

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

    Seguindo a abordagem mais simples, criamos um novo tema que estende o badge-theme e aceita alguns parâmetros que estilizam os itens do badge.

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

    Para incluir o novo tema usamos o mixin css-vars:

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

    Demo

    API References

    Theming Dependencies

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.