Visão geral do botão do ícone Blazor

    O componente Ignite UI for Blazor Icon Button permite que os desenvolvedores usem ícones registrados como botões em seus aplicativos. Ele carrega todos os recursos do componente de ícone, mas adiciona recursos do componente de botão também.

    Exemplo de botão de ícone Blazor

    Usage

    Antes de usar o IgbIconButton, você precisa registrá-lo da seguinte forma:

    // in Program.cs file

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

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo ao componente IgbIconButton. O seguinte precisa 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" />

    <IgbIconButton IconName="thumb-up" Collection="material" />

    Examples

    Variant

    Semelhante aos componentes de botão regulares, o botão de ícone suporta diversas variantes: flat (padrão), contained e outlined; Para alterar o tipo de botão de ícone, defina o atributo variant do botão de ícone.

    <IgbIconButton IconName="search" Variant="@IconButtonVariant.Contained" Collection="material" />

    Tamanho

    O tamanho do botão pode ser alterado utilizando a variável CSS--ig-size para qualquer um dos três tamanhos suportados:--ig-size-small,--ig-size-medium,--ig-size-large (padrão).

    igc-icon-button {
    --ig-size: var(--ig-size-medium);
}

    <IgbIconButton IconName="thumb-up" Collection="material" Size="@SizableComponentSize.Medium" />

    Type

    O componente do botão de ícone mudará sua estrutura interna de <button> para um elemento do tipo <a> quando o atributo href for definido. Nesse caso, o botão de ícone pode ser pensado como um link regular. Definir o atributo href permitirá que você também defina os atributos rel, target e download do botão de ícone.

    <IgbIconButton IconName="thumb-up" Collection="material" Href="https://duckduckgo.com" Target="_blank" />

    Mirrored

    Alguns ícones precisam parecer um pouco diferentes quando usados no modo Right-to-Left (RTL). Por esse motivo, fornecemos um atributo mirrored que, quando definido, inverte o botão do ícone horizontalmente.

    <IgbIconButton IconName="thumb-up" Collection="material" Mirrored="true" />

    Styling

    The IgbIconButton component exposes two CSS parts - base and icon that allow you to style the wrapping element (<button> or <a>) and the wrapped <igc-icon> element.

    igc-icon-button[variant="contained"]:not([disabled])::part(base) {
  padding: 12px;
  background-color: var(--ig-success-500);
}

igc-icon-button::part(icon) {
  --size: 22px;
  color: var(--ig-success-500-contrast);
}

    API References

    Additional Resources