Visão geral do grupo de botões Blazor

    O componente Grupo de botões Blazor é usado para organizar IgbToggleButton em grupos de botões estilizados com alinhamento horizontal/vertical, seleção única/múltipla e alternância.

    Blazor Button Example

    Usage

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

    // in Program.cs file

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

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

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

    Para uma introdução completa à Ignite UI for Blazor, leia o tópico Introdução.

    Agora que você importou o Grupo de Botões Ignite UI for Blazor, pode começar com uma configuração básica do IgbButtonGroup e seus botões.

    Use o IgbButtonGroup seletor para envolver seu IgbToggleButton s e exibi-lo em um grupo de botões. Se você quiser que um botão seja selecionado por padrão, use o Selected atributo:

    <IgbButtonGroup>
    <IgbToggleButton Value="left">
        <IgbIcon @ref="iconRef" IconName="format_align_left" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="center">
        <IgbIcon IconName="format_align_center" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="right">
        <IgbIcon IconName="format_align_right" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="justify" Selected="true">
        <IgbIcon IconName="format_align_justify" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
</IgbButtonGroup>

    Examples

    Alignment

    Use a Alignment propriedade para definir a orientação dos botões no grupo de botões.

    Escolha

    Para configurar a seleção Ignite UI for Blazor IgbButtonGroup, você pode usar sua Selection propriedade. Essa propriedade aceita os três modos a seguir:

    • single- modo de seleção padrão do grupo de botões. Um único botão pode ser selecionado/desselecionado pelo usuário.
    • single-required- imita um comportamento de grupo de rádio. Apenas um botão pode ser selecionado e, uma vez feita a seleção inicial, a desseleção não é possível por meio da interação do usuário.
    • Vários botões no grupo podem ser selecionados e desmarcados.

    O exemplo abaixo demonstra os modos de seleção expostos IgbButtonGroup:

    A IgbToggleButton pode ser marcado como selecionado por meio de seu Selected atributo ou por meio do IgbButtonGroup SelectedItems atributo:

    <IgbButtonGroup SelectedItems='["bold"]'>
    <IgbToggleButton Value="bold">
        <IgbIcon @ref="iconRef" IconName="bold" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="italic">
        <IgbIcon IconName="italic" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
    <IgbToggleButton Value="underlined">
        <IgbIcon IconName="underlined" Collection="material"></IgbIcon>
        <IgbRipple />
    </IgbToggleButton>
</IgbButtonGroup>

    [!Note] Setting IgbToggleButton Value attribute is mandatory for using the SelectedItems property of the IgbButtonGroup.

    Tamanho

    A propriedade personalizada CSS--ig-size pode ser usada para controlar o tamanho do grupo de botões.

    Styling

    O IgbButtonGroup componente expõe group a parte CSS que nos permite estilizar o contêiner do grupo de botões. Além disso, o IgbToggleButton s fornece toggle uma parte CSS que pode ser usada para estilizar o elemento button.

    igc-button-group::part(group) {
  background-color: var(--ig-primary-500);
  padding: 8px;
}

igc-toggle-button::part(toggle) {
  color: var(--ig-secondary-300);
}

    API Reference

    Additional Resources