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ê então precisará importar oIgrBadge CSS necessário assim:

    import { IgrBadge } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrBadge />

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

    <IgrBadge outlined={true} ></IgrBadge>

    Examples

    Variants

    O emblema Ignite UI for React 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.

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

    Shape

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

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

    Dot

    The Ignite UI for React 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.).

    <IgrBadge dot={true} ></IgrBadge>

    Styling

    OIgrBadge 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