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
Usage
Primero, debe instalar la 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 Introducción.
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 configurar el atributo outlined 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 atributo variant.
<igc-badge variant="success"></igc-badge>
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>
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;
}