Visão geral do emblema Blazor

    O Ignite UI for Blazor Badge é um componente usado em conjunto com avatares, menus de navegação ou outros componentes em um aplicativo quando uma notificação visual é necessária. Os Badges geralmente são projetados com estilos predefinidos para comunicar informações, sucesso, avisos ou erros.

    Blazor Badge Example

    Usage

    Antes de usá-losIgbBadge, você precisa registrá-los da seguinte forma:

    // in Program.cs file

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

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aoIgbBadge componente. O seguinte deve ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

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

    <IgbBadge />

    Para exibir uma borda sutil ao redor do distintivo, você pode definir oOutlined atributo do distintivo.

    <IgbBadge Outlined="true" />

    Examples

    Variants

    O emblema Ignite UI for Blazor suporta várias variantes estilísticas pré-definidas. Você pode alterar a variante atribuindo um dos valores suportados -primary(padrão),info,success,warning, oudanger aoVariant atributo.

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

    Shape

    O componente de distintivo suportarounded (padrão) esquare formas. Esses valores podem ser atribuídos aoShape atributo.

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

    Styling

    OIgbBadge componente expõe umabase parte CSS que pode ser usada para alterar todas as suas propriedades de estilo.

    igc-badge::part(base) {
  background: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  border-radius: 2px;
}

    API References

    Additional Resources