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.
<!DOCTYPE html><html><head><title>Badge Outlined</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="sample center"><igc-badgeoutlined></igc-badge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */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í:
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-badgeoutlined></igc-badge>html
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.
<!DOCTYPE html><html><head><title>Badge Variants</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="sample center"><igc-badgevariant="success"></igc-badge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Shape
El componente de insignia admite formas rounded (predeterminadas) y square. Estos valores se pueden asignar al atributo shape.
<!DOCTYPE html><html><head><title>Badge Shape</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="sample center"><igc-badgeshape="square"></igc-badge></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %>
<scriptsrc="src/index.ts"></script>
<% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Styling
El componente de insignia expone una parte base que se puede usar para cambiar todas sus propiedades de estilo.