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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    Usage

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

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

    También deberá vincular un archivo CSS adicional para aplicar el estilo al IgbBadge componente. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

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

    Para mostrar un borde sutil alrededor de la insignia, puede configurar el atributo outlined de la insignia.

    <IgbBadge Outlined="true" />
    razor

    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 variant atributo.

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Shape

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

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Styling

    El IgbBadge 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

    EXAMPLE

    API References

    Additional Resources