Visão geral do botão Blazor

    The Blazor Button Component lets you enable clickable elements that trigger actions in your Blazor app. You get full control over how you set button variants, configure styles for the wrapped element, and define sizes. The Button Component also gives flexibility through the Blazor Button OnClick event, toggle the Blazor button, disable the Blazor button, and more.

    Blazor Button Example

    Usage

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

    // in Program.cs file

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

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

    <IgbButton />

    Prefix / Suffix

    Com os slots prefix e suffix do componente IgbButton, podemos adicionar conteúdo diferente antes e depois do conteúdo principal do botão.

    <IgbButton Variant="@ButtonVariant.Contained">
    <span slot="prefix">+</span>Click me<span slot="suffix">-</span>
</IgbButton>

    Type

    O componente de botão mudará sua estrutura interna de um elemento do tipo <button> para um elemento do tipo <a> quando o atributo Href for definido. Nesse caso, o botão pode ser pensado como um link regular. Definir o atributo Href permitirá que você também defina os atributos Rel, Target e Download. No caso em que o componente de botão usa um elemento <button> real internamente, podemos especificar seu DisplayType definindo a propriedade para qualquer um dos seguintes valores:

    • Submit- quando queremos enviar os dados do formulário
    • reset- quando queremos redefinir os dados do formulário para seus valores iniciais
    • button- quando queremos adicionar um botão com uma funcionalidade personalizada em qualquer lugar de uma página da web

    Button Variants

    Contained Button

    Use o atributo variant para adicionar um botão contido simples no seu template de componente. Note que se você não definir o variant, por padrão ele será definido como contained.

    <IgbButton Variant="@ButtonVariant.Contained" />

    Outlined Button

    Tudo o que você precisa fazer para criar um botão outlined é alterar o valor da propriedade variant:

    <IgbButton Variant="@ButtonVariant.Outlined" />

    Flat Button

    Analogicamente, podemos mudar para a variante flat.

    <IgbButton Variant="@ButtonVariant.Flat" />

    Floating Action Button

    Podemos criar um botão de ação flutuante definindo a propriedade variant como fab:

    <IgbButton Variant="@ButtonVariant.Fab" />

    Button Sizing

    Os usuários podem alterar o tamanho do componente button usando a variável CSS--ig-size. No exemplo a seguir, adicionaremos alguns botões de opção para exibir todos os valores de tamanho. Dessa forma, sempre que um for selecionado, alteraremos o tamanho do botão.

    <IgbRadioGroup id="radioGroup" Alignment="RadioGroupAlignment.Horizontal" >
    <IgbRadio Value="small" LabelPosition="RadioLabelPosition.After" @onclick="OnSmallClick">Small</IgbRadio>
    <IgbRadio Value="medium" LabelPosition="RadioLabelPosition.After" @onclick="OnMediumClick">Medium</IgbRadio>
    <IgbRadio Value="large" LabelPosition="RadioLabelPosition.After" Checked="true" @onclick="OnLargeClick">Large</IgbRadio>
</IgbRadioGroup>

@code {
    private SizableComponentSize SizableComponentSize = SizableComponentSize.Large;

    protected override void OnInitialized()
    {
    }

    public void OnSmallClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Small;
    }

    public void OnMediumClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Medium;
    }

    public void OnLargeClick(EventArgs e)
    {
        SizableComponentSize = SizableComponentSize.Large;
    }
}

    O resultado da implementação do código acima deve ser semelhante ao seguinte:

    Download

    Definir a propriedade download solicitará que o usuário salve o URL vinculado em vez de navegar até ele.

    <IgbButton Variant="@ButtonVariant.Contained" Download="Url" Href="https://pt-br.infragistics.com/" Target="@ButtonBaseTarget._blank">
    Download
</IgbButton>

    Styling

    The IgbButton component exposes three CSS parts which we can use for styling:

    Nome Descrição
    base The native button element of the igc-button component.
    prefix The prefix container of the igc-button component.
    suffix The suffix container of the igc-button component.

    The base CSS part allows us to style the wrapped element (<button> or <a>).

    igc-button::part(base) {
  background-color: var(--ig-primary-500);
  color: var(--ig-primary-500-contrast);
  padding: 18px;
}

    API References

    Additional Resources