Resumen de la insignia de Blazor

    El distintivo de Ignite UI for Blazor 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.

    Blazor Badge Example

    Usage

    Antes de usarlosIgbBadge, debes registrarlo de la siguiente manera:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule));

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo alIgbBadge componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web Blazor o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbBadge />

    Para mostrar un borde sutil alrededor de la insignia, puedes establecer elOutlined atributo de la insignia.

    <IgbBadge Outlined="true" />

    Examples

    Variants

    La insignia Ignite UI for Blazor soporta varias variantes estilísticas predefinidas. Puedes cambiar la variante asignando uno de los valores soportados -primary(por defecto),info,success,warning, odanger alVariant atributo.

    <IgbBadge Variant="@BadgeVariant.Success" />

    Shape

    El componente de insigniarounded soporta (por defecto) ysquare formas. Estos valores pueden asignarse alShape atributo.

    <IgbBadge Shape="@BadgeShape.Square" />

    Styling

    ElIgbBadge componente expone unabase parte CSS que puede usarse 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;
}

    API References

    Additional Resources