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ê então precisará importar oIgcBadgeComponent 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 Comecando.

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

    <igc-badge></igc-badge>

    Para exibir uma borda sutil ao redor do distintivo, você pode definir ooutlined atributo do distintivo.

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

    Examples

    Variants

    O emblema Ignite UI for Web Components suporta várias variantes estilísticas pré-definidas. Você pode alterar a variante atribuindo um dos valores suportados -primary(padrão),info,success,warning, oudanger aovariant atributo.

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

    Shape

    O componente de distintivo suportarounded (padrão) esquare formas. Esses valores podem ser atribuídos aoshape atributo.

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

    Dot

    The Ignite UI for Web Components badge component can also render as a minimal dot indicator for notifications by setting its dot attribute. 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.).

    <igc-badge dot></igc-badge>

    Styling

    OIgcBadgeComponent componente expõe umabase parte CSS que pode ser usada para alterar todas as suas propriedades de estilo.

    igc-badge::part(base) {
    --background-color: var(--ig-error-A100);
    --border-radius: 2px;
}

    API References

    Additional Resources