Blazor Button Group Overview

    The Blazor Button Group component is used to organize IgbToggleButton's into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.

    Blazor Button Example

    Usage

    Before using the IgbButtonGroup, you need to register it as follows:

    // in Program.cs file

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

    You will also need to link an additional CSS file to apply the styling to the IgbButtonGroup component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <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.

    Now that you have the Ignite UI for Blazor Button Group imported, you can start with a basic configuration of the IgbButtonGroup and its buttons.

    Use the IgbButtonGroup selector to wrap your IgbToggleButtons and display them into a button group. If you want a button to be selected by default, use the Selected attribute:

    <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 the Alignment property to set the orientation of the buttons in the button group.

    Escolha

    In order to configure the Ignite UI for Blazor IgbButtonGroup selection, you could use its Selection property. This property accepts the following three modes:

    • 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 - mimics a radio group behavior. Only one button can be selected and once initial selection is made, deselection is not possible through user interaction.
    • multiple - multiple buttons in the group can be selected and deselected.

    The sample below demonstrates the exposed IgbButtonGroup selection modes:

    A IgbToggleButton could be marked as selected via its Selected attribute or through the IgbButtonGroup SelectedItems attribute:

    <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

    The IgbButtonGroup component exposes group CSS part that allows us to style the button group container. Also, the IgbToggleButtons provide toggle CSS part that could be used to style the button element.

    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