Descripción general de la insignia Blazor

    La Ignite UI for Blazor Badge 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.

    Blazor Badge Example

    Usage

    Antes de utilizar IgbBadge, debe registrarlo de la siguiente manera:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule));
    

    También deberá vincular un archivo CSS adicional para aplicar el estilo al componente IgbBadge. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly 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, puede configurar el atributo outlined de la insignia.

    <IgbBadge Outlined="true" />
    

    Examples

    Variants

    La insignia Ignite UI for Blazor 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.

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

    Shape

    El componente de insignia admite formas rounded (predeterminadas) y square. Estos valores se pueden asignar al atributo shape.

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

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

    API References

    Additional Resources