Visão geral do emblema Web Components

    O Ignite UI for Web Components 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 com estilos predefinidos para comunicar informações, sucesso, avisos ou erros.

    Web Components Badge Example

    Usage

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

    Você precisará então importar o IgcBadgeComponent, seu CSS necessário e registrar seu módulo, assim:

    import { defineComponents, IgcBadgeComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcBadgeComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    A maneira mais simples de começar a usar o IgcBadgeComponent é a seguinte:

    <igc-badge></igc-badge>

    Para exibir uma borda sutil ao redor do emblema, você pode definir o atributo outlined do emblema.

    <igc-badge outlined></igc-badge>

    Examples

    Variants

    O emblema Ignite UI for Web Components suporta diversas variantes estilísticas predefinidas. Você pode alterar a variante atribuindo um dos valores suportados -primary (padrão), info, success, warning ou danger ao atributo variant.

    <igc-badge variant="success"></igc-badge>

    Shape

    O componente badge suporta formas rounded (padrão) e square. Esses valores podem ser atribuídos ao atributo shape.

    <igc-badge shape="square"></igc-badge>

    Styling

    The IgcBadgeComponent component exposes a base CSS part that can be used to change all of its style properties.

    igc-badge::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  border-radius: 2px;
}

    API References

    Additional Resources