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.

    Blazor Icon Button Example

    Usage

    Antes de usá-losIgbIconButton, você precisa registrá-los 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 aoIgbIconButton 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" />

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

    Examples

    Variant

    Semelhante aos componentes normais dos botões, o botão ícone suporta várias variantes -flat(padrão),contained eoutlined; Para mudar o tipo de botão de ícone, defina ovariant atributo do botão de ícone.

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

    Tamanho

    O tamanho do botão pode ser alterado utilizando a--ig-size variável CSS 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 ícone do botão mudará sua estrutura interna de<button> para um<a> elemento tipo quando ohref atributo for definido. Nesse caso, o botão de ícone pode ser visto como um link comum. Definir ohref atributo permitirá que você também defina orel,target edownload atributos do botão de ícone.

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

    Mirrored

    Alguns ícones precisam ter uma aparência um pouco diferente quando usados no modo Direita para Esquerda (RTL). Por isso, fornecemos ummirrored atributo que, quando definido, vira o botão do ícone horizontalmente.

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

    Styling

    OIgbIconButton componente expõe duas partes CSS —baseeicon isso permite que você estilize o elemento de enrolamento (<button>ou<a>) e o elemento enrolado<igc-icon>.

    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