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

import { defineComponents, IgcBadgeComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcBadgeComponent);
export class BadgeOutlined {
    constructor() {
    }
}

new BadgeOutlined();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Badge Outlined</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="sample center">
      <igc-badge outlined></igc-badge>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="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

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

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

import { defineComponents, IgcBadgeComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcBadgeComponent);
export class BadgeVariants {
    constructor() {
    }
}

new BadgeVariants();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Badge Variants</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="sample center">
      <igc-badge variant="success"></igc-badge>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="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.

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

import { defineComponents, IgcBadgeComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcBadgeComponent);
export class BadgeShape {
    constructor() {
    }
}

new BadgeShape();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Badge Shape</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="sample center">
      <igc-badge shape="square"></igc-badge>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

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;
}
css