Descripción general de la insignia React

    La insignia Ignite UI for React es un componente que se utiliza junto con avatares, menús de navegación u otros componentes de una aplicación cuando se necesita una notificación visual. Las insignias suelen estar diseñadas con estilos predefinidos para comunicar información, éxito, advertencias o errores.

    React Badge Example

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Entonces tendrás que importar elIgrBadge CSS necesario de la siguiente manera:

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

    <IgrBadge />

    Para mostrar un borde sutil alrededor de la insignia, puedes establecer eloutlined atributo de la insignia.

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

    Examples

    Variants

    La insignia Ignite UI for React soporta varias variantes estilísticas predefinidas. Puedes cambiar la variante asignando uno de los valores soportados -primary(por defecto),info,success,warning, odanger alvariant atributo.

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

    Shape

    El componente de insigniarounded soporta (por defecto) ysquare formas. Estos valores pueden asignarse alshape 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

    ElIgrBadge componente expone unabase parte CSS que puede usarse para cambiar todas sus propiedades de estilo.

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

    API References

    Additional Resources