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.

    Ejemplo de insignia Web Components

    EXAMPLE
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    En primer lugar, debe instalar el 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 Primeros pasos.

    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

    Ejemplos

    Variantes

    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>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Forma

    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

    Estilo

    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

    Referencias de API

    Recursos adicionales