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>

    Styling

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

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

    API References

    Additional Resources