Visão geral do grupo de botões Blazor

    O componente Blazor Grupo de Botões é usado para organizarIgbToggleButton os grupos de botões com estilo com alinhamento horizontal/vertical, seleção uma/múltipla e alternância.

    Blazor Button Example

    Usage

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

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

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

    Use oIgbButtonGroup seletor para enrolar seuIgbToggleButton s e exibi-los em um grupo de botões. Se quiser que um botão seja selecionado por padrão, use oSelected 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 aAlignment propriedade para definir a orientação dos botões no grupo de botões.

    Escolha

    Para configurar a seleção Ignite UI for BlazorIgbButtonGroup, você pode usar a propriedade delaSelection. Essa propriedade aceita os seguintes três modos:

    • 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 expostosIgbButtonGroup:

    AIgbToggleButton poderia ser marcado como selecionado por meio de seuSelected atributo ou através doIgbButtonGroup 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--ig-size propriedade personalizada CSS pode ser usada para controlar o tamanho do grupo de botões.

    Styling

    OIgbButtonGroup componente expõegroup a parte CSS que nos permite estilizar o container do grupo de botões. Além disso, osIgbToggleButton s fornecemtoggle uma parte CSS que pode ser usada para estilizar o elemento do botão.

    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