Descripción general de la insignia Web Components

    La insignia Ignite UI for Web Components es un componente que se utiliza junto con avatares, menús de navegación u otros componentes en 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

    EXAMPLE
    TS
    HTML
    CSS

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Usage

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents
    cmd

    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);
    ts

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Introducción.

    La forma más sencilla de empezar a utilizarlo IgcBadgeComponent es la siguiente:

    <igc-badge></igc-badge>
    html

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

    <igc-badge outlined></igc-badge>
    html
    Ignite UI for Web Components | CTA Banner

    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 atributo variant.

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

    EXAMPLE
    TS
    HTML
    CSS

    Shape

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

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

    EXAMPLE
    TS
    HTML
    CSS

    Styling

    El componente de insignia expone una parte base que se puede usar para cambiar todas sus propiedades de estilo.

    igc-badge::part(base) {
      color: olive;
      background: beige;
      border-radius: 2px;
    }
    css

    API References

    Additional Resources