Visão geral do crachá React

    O Ignite UI for React 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 emblemas geralmente são projetados com estilos predefinidos para comunicar informações, sucesso, avisos ou erros.

    React Badge Example

    Usage

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

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

    import { IgrBadgeModule, IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrBadgeModule.register();

    <IgrBadge />

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

    <IgrBadge outlined="true" ></IgrBadge>

    Examples

    Variants

    O emblema Ignite UI for React suporta várias variantes estilísticas predefinidas. É possível alterar a variante atribuindo um dos valores suportados -primary (default), info, success, warning, ou danger ao variant atributo.

    <IgrBadge variant="success" ></IgrBadge>

    Shape

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

    <IgrBadge shape="square" ></IgrBadge>

    Styling

    O IgrBadge componente expõe uma base parte CSS que pode ser usada para alterar todas as suas propriedades de estilo.

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

    API References

    Additional Resources