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 necesitarás importar IgcBadgeComponent, su 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 utilizarlo IgcBadgeComponent es la siguiente:

    <igc-badge></igc-badge>

    Para mostrar un borde sutil alrededor de la insignia, puede establecer el outlined atributo de la insignia.

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

    Examples

    Variants

    La insignia Ignite UI for Web Components admite varias variantes estilísticas predefinidas. Puede cambiar la variante asignando uno de los valores admitidos -primary (predeterminado), info, success, warning, o danger al variant atributo.

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

    Shape

    El componente de insignia admite rounded (predeterminado) y square formas. Estos valores se pueden asignar al shape atributo.

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

    Styling

    El IgcBadgeComponent componente expone una base parte CSS que se puede utilizar 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