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 issoIgxBadgeModule no seu arquivo 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 você pode importar comoIgxBadgeComponent uma dependência independente.

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

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

Using the Angular Badge Component

Vamos ver como a amostra da demo é feita. É um simples distintivo de sucesso em um avatar. Para construir isso, precisamos importar oIgxAvatarModule, junto com oIgxBadgeModule:

// 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, a partir de16.0.0 agora, você pode importar asIgxBadgeComponent dependências eIgxAvatarComponent como independentes.

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 mudar a forma do distintivo usando oshape atributo definindo seu valor parasquare. Por padrão, o formato do distintivo é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 distintivo pode ser controlado usando a--size variável. Isso garante que o distintivo tenha tamanhos proporcionais em ambas as direções. Lembre-se, porém, que os emblemas contendo valores de texto usam ocaption estilo tipográfico para o tamanho da fonte e altura da linha. Por essa razão, ao definir valores--size abaixo de 16px de um distintivo contendo texto, 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, oigx-badge componente também suporta o uso do Material Icons Extended e qualquer outro conjunto de ícones personalizado. Para adicionar um ícone do conjunto de ícones de materiais estendidos dentro do seu componente de distintivo, 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>

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

Vamos estender o exemplo anterior e criar uma lista de contatos, semelhante aos dos clientes de chat. Além do nome do contato, queremos exibir um avatar e o estado atual do contato (online, offline ou ausente). Para isso, estamos usando osigx-badge componentes eigx-avatar Para um recipiente,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 } 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

Osigx-badge dispositivos eicontype entradas para configurar o visual do distintivo. Você pode definir o ícone fornecendo seu nome no conjunto oficial de ícones de material. O tipo de distintivo pode ser definido para qualquer umdefault,info,success,warning, ouerror. Dependendo do tipo, uma cor de fundo específica é aplicada.

Em nossa amostra,icon etype estão vinculados a propriedades do modelo chamadas í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

Badge Theme Property Map

Alterar a$background-color propriedade atualiza automaticamente as seguintes propriedades dependentes:

Propriedade primária	Propriedade dependente	Descrição
$background cor	$icon cor	A cor usada para os ícones no distintivo.
	$text-cor	A cor usada para o texto no distintivo.

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

@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 ebadge-theme aceita alguns parâmetros que estilizam os itens do selo. Quando você define o$background-color, os$icon-color e$text-color são automaticamente atribuídos com base em qual oferece melhor contraste — preto ou branco. Note que a$border-radius propriedade só entra em vigor quando o distintivoshape está configurado parasquare.

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

Para incluir o novo tema, usamos otokens mixin:

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

Demo

Styling with Tailwind

Você pode usarbadge nossas classes utilitárias personalizadas de Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

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

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

Uselight-* as aulas para o tema da luz.
Usedark-* classes para o tema sombrio.
Adicione o nome do componente após o prefixo, por exemplo,light-badge,dark-badge.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no tema do emblema. A sintaxe é a seguinte:

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

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.

No final, seus distintivos devem ficar assim:

API References

Theming Dependencies

Tema IgxIcon

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Visão geral do 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

Estilização

Badge Theme Property Map

Demo

Styling with Tailwind

Note

API References

Theming Dependencies

Additional Resources

Temas