Resumen de la insignia de Web Components

    El distintivo de Ignite UI for Web Components 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.

    Web Components Badge Example

    Usage

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Luego tendrás que importar elIgcBadgeComponent CSS necesario y registrar su módulo, así:

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

defineComponents(IgcBadgeComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    La forma más sencilla de empezar a usar elIgcBadgeComponent uso es la siguiente:

    <igc-badge></igc-badge>

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

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

    Examples

    Variants

    La insignia Ignite UI for Web Components 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.

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

    Shape

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

    ElIgcBadgeComponent 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