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 obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

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

    <igc-badge></igc-badge>

    To display a subtle border around the badge, you can set the outlined attribute of the badge.

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

    Examples

    Variants

    The Ignite UI for Web Components badge supports several pre-defined stylistic variants. You can change the variant by assigning one of the supported values - primary(default), info, success, warning, or danger to the variant attribute.

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

    Shape

    The badge component supports rounded(default) and square shapes. These values can be assigned to the shape attribute.

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

    Styling

    The IgcBadgeComponent component exposes a base CSS part that can be used to change all of its style properties.

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

    API References

    Additional Resources