Visão geral do componente Angular Button Group

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

Angular Button Group Example

Getting Started with Ignite UI for Angular Button Group

Para começar a usar o componente Ignite UI for Angular Button Group, primeiro você precisa instalar Ignite UI for Angular. Em um aplicativo Angular existente, digite o seguinte comando:

ng add igniteui-angular

Para obter uma introdução completa ao Ignite UI for Angular, leia o tópico de introdução.

O próximo passo é importar o IgxButtonGroupModule no seu arquivo app.module.ts.

// app.module.ts

...
import { IgxButtonGroupModule } from 'igniteui-angular';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxButtonGroupModule],
    ...
})
export class AppModule {}

Como alternativa, a partir da 16.0.0 você pode importar o IgxButtonGroupComponent como uma dependência autônoma ou usar o token IGX_BUTTON_GROUP_DIRECTIVES para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

...
import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
// import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-buttongroup>
        <button igxButton>
            <igx-icon>format_align_left</igx-icon>
        </button>
        <button igxButton>
            <igx-icon>format_align_center</igx-icon>
        </button>
        <button igxButton>
            <igx-icon>format_align_right</igx-icon>
        </button>
        <button igxButton selected>
            <igx-icon>format_align_justify</igx-icon>
        </button>
    </igx-buttongroup>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent]
    /* or imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] */
})
export class HomeComponent {}

Agora que você importou o módulo ou as diretivas do Ignite UI for Angular Button Group, você pode começar com uma configuração básica do igx-buttongroup e seus botões.

Using for Angular Button Group Component

Add Button Group

Use o seletor igx-buttongroup para envolver seus botões e exibi-los em um grupo de botões. Se quiser que um botão seja selecionado por padrão, use a propriedade selected:

<!-- sample.component.html -->
<igx-buttongroup>
  <button igxButton>
    <igx-icon>format_align_left</igx-icon>
  </button>
  <button igxButton>
    <igx-icon>format_align_center</igx-icon>
  </button>
  <button igxButton>
    <igx-icon>format_align_right</igx-icon>
  </button>
  <button igxButton selected>
    <igx-icon>format_align_justify</igx-icon>
  </button>
</igx-buttongroup>

Examples

Alignment

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

//sample.component.ts
import { ButtonGroupAlignment } from 'igniteui-angular';
// import { ButtonGroupAlignment } from '@infragistics/igniteui-angular'; for licensed package

...
public alignment = ButtonGroupAlignment.vertical;
...

<!-- sample.component.html -->
<igx-buttongroup [alignment]="alignment">
  <button igxButton>Sofia</button>
  <button igxButton>London</button>
  <button igxButton selected>New York</button>
  <button igxButton>Tokyo</button>
</igx-buttongroup>

Escolha

Para configurar a seleção igx-buttongroup, você pode usar sua propriedade selectionMode. 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.
• singleRequired- imita um comportamento de grupo de rádio. Apenas um botão pode ser selecionado e, uma vez feita a seleção inicial, a desmarcação não é possível por meio da interação do usuário.
• multi- vários botões no grupo podem ser selecionados e desmarcados.

O exemplo abaixo demonstra os modos de seleção igx-buttongroup expostos:

Tamanho

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

/* sample.component.scss */
igx-buttongroup {
  --ig-size: var(--ig-size-small);
}

<!-- sample.component.html -->
<igx-buttongroup></igx-buttongroup>

Custom toggle buttons

Use a propriedade de entrada values para definir uma matriz de botões personalizados no grupo de botões.

// sample.component.ts

interface IButton {
    ripple?: string;
    label?: string;
    disabled?: boolean;
    togglable?: boolean;
    selected?: boolean;
    color?: string;
    icon?: string;
}

class ToggleButton {
    private ripple: string;
    private label: string;
    private disabled: boolean;
    private togglable: boolean;
    private selected: boolean;
    private color: string;
    private icon: string;

    constructor(obj?: IButton) {
        this.ripple = obj.ripple || 'gray';
        this.label = obj.label;
        this.selected = obj.selected || false;
        this.togglable = obj.togglable || true;
        this.disabled = obj.disabled || false;
        this.color = obj.color;
        this.icon = obj.icon;
    }
}
...
public bordersButtons: ToggleButton[];

public ngOnInit() {
    this.bordersButtons = [
        new ToggleButton({
            icon: 'border_top',
            selected: true
        }),
        new ToggleButton({
            icon: 'border_right',
            selected: false
        }),
        new ToggleButton({
            icon: 'border_bottom',
            selected: false
        }),
        new ToggleButton({
            icon: 'border_left',
            selected: false
        })
    ];
}
...

<!-- sample.component.html -->
<igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>

Estilização

Para começar a estilizar o grupo de botões, precisamos importar o arquivo index, onde todas as funções do tema e mixins de componentes estão localizados:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Seguindo a abordagem mais simples, criamos um novo tema que estende o button-group-theme e aceita alguns dos parâmetros que estilizam os itens do grupo de botões em seus diferentes estados.

$custom-button-group: button-group-theme(
  $item-text-color: #fdfdfd,
  $item-background: #2f4d6a,
  $item-hover-text-color: #fdfdfd,
  $item-hover-background: #1f3347,
  $item-selected-text-color: #fdfdfd,
  $item-selected-background: #1f3347,
  $item-selected-hover-background: #1f3347,
  $disabled-text-color: gray,
  $disabled-background-color: lightgray,
);

Como visto, o button-group-theme expõe alguns parâmetros úteis para o estilo básico de seus itens. Se você quiser se aprofundar mais e alterar alguns parâmetros específicos do botão, você pode criar um novo tema que estenda o button-theme e o escopo sob a respectiva classe do grupo de botões.

A última etapa é incluir o tema do componente.

@include css-vars($custom-button-group);

Demo

API References

• Componente do grupo IgxButton
• Estilos de IgxButtonGroup
• Diretiva IgxButton
• Estilos de IgxButton

Theming Dependencies

• Tema IgxIcon
• Tema IgxButton
• Tema IgxRipple

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Angular Fóruns
• Ignite UI for Angular GitHub