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 issoIgxButtonGroupModule no seu arquivo app.module.ts.

// app.module.ts

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

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

Alternativamente,16.0.0 você pode importarIgxButtonGroupComponent como uma dependência independente ou usar oIGX_BUTTON_GROUP_DIRECTIVES token para importar o componente e todos os seus componentes e diretivas de suporte.

// home.component.ts

...
import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';
import { IgxIconComponent } from 'igniteui-angular/icon';
// 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 diretivas Ignite UI for Angular Button Group, pode começar com uma configuração básica doigx-buttongroup e seus botões.

Using for Angular Button Group Component

Add Button Group

Use oigx-buttongroup seletor para enrolar seus botões e exibi-los em um grupo de botões. Se você quiser que um botão seja selecionado por padrão, use aselected propriedade:

<!-- 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 aalignment propriedade de entrada para definir a orientação dos botões no grupo de botões.

//sample.component.ts
import { ButtonGroupAlignment } from 'igniteui-angular/button-group';
// 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 aigx-buttongroup seleção, você pode usar a propriedade selectionMode. 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.
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 expostosigx-buttongroup:

Tamanho

A--ig-size propriedade personalizada CSS 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 avalues propriedade de entrada para definir um array 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

Button Group Theme Property Map

Quando você define um valor para a$item-background propriedade, todas as propriedades dependentes relacionadas listadas na tabela abaixo são automaticamente atualizadas para manter a consistência visual. A tabela mostra quais propriedades são afetadas quando você personaliza a propriedade principal.

Propriedade primária	Propriedade dependente	Descrição
$item-contexto	$item-hover-background	A cor de fundo flutuante para os itens.
	$item-selecionado-fundo	A cor de fundo do item selecionado.
	$item-foco-foco-o-fundo	A cor de fundo do item focada.
	$disabled-cor de fundo	A cor de fundo do item desativada.
	$item-cor da borda	A cor da borda dos itens.
	$item-text-color	A cor do texto para os itens.
	$idle-sombra-cor	A cor da sombra ociosa para os itens.
$item-hover-background	$item-selecionada-passa-mouse-fundo	O item selecionado passa a cor de fundo com o curso.
	$item-fundo-focado no hover	A cor de fundo flutuante focada.
	$item-hover-text-color	A cor do texto para itens flutuados.
	$item-homover-ícone-cor	A cor do ícone para itens flutuados.
$item-selecionado-fundo	$item-foco-selecionado-fundo-fundo	O item selecionado foca a cor de fundo.
	$disabled-selecionado-fundo	A cor de fundo selecionada para deficientes.
	$item-selecionada-cor-texto-	A cor do texto para itens selecionados.
	$item-icon-color-selecionado	A cor do ícone para itens selecionados.
	$item-selecionada-passar o curso-de-texto-cor	A cor do texto para itens selecionados flutua.
	$item-escolhido-ícone-color-passar o mouse	A cor do ícone para itens selecionados flutuando.
$item-cor da borda	$item-borda-cor flutuante	A cor da borda para itens flutuados.
	$item-foca-no-cor-de-borda	A cor da borda para itens focados.
	$item-selecionada-cor-borda-	A cor da borda para itens selecionados.
	$item-selecionada-flutuar-cor-borda-	A cor da borda para itens selecionados de flutuação.
	$item-fronteira para pessoas com deficiência	A cor da borda para itens desativados.
	$disabled-selecionada-cor-borda-	A cor da borda para itens selecionados desativados.

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

@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 obutton-group-theme e especifica apenas o$item-background. Com base nesse valor, o tema calculará automaticamente as cores de estado apropriadas, os primeiros planos de contraste e as bordas do grupo de botões. Claro, você ainda pode sobrescrever qualquer um dos parâmetros do tema com valores personalizados, se necessário.

$custom-button-group: button-group-theme(
  $item-background: #57a5cd,
);

Como visto, elebutton-group-theme expõe alguns parâmetros úteis para o estilo básico de seus itens. Se quiser aprofundar e mudar alguns parâmetros específicos de botões, pode criar um novo tema que estenda obutton-theme e escopá-lo sob a respectiva classe de grupo de botões.

A última etapa é incluir o tema do componente.

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

Demo

Styling with Tailwind

Você pode usarbutton-group nossas classes utilitárias personalizadas de Tailwind. Certifique-se de configurar o Tailwind primeiro.

Junto com a importação de vento de cauda em sua folha de estilo global, você pode aplicar os utilitários de tema desejados da seguinte maneira:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

O arquivo utilitário inclui tantolight as variantes quantodark as do tema.

Uselight-* as aulas para o tema da luz.
Usedark-* classes para o tema sombrio.
Adicione o nome do componente após o prefixo, por exemplo,light-button-group,dark-button-group.

Uma vez aplicadas, essas classes possibilitam cálculos dinâmicos de temas. A partir daí, você pode sobrescrever as variáveis CSS geradas usandoarbitrary properties. Após os dois-pos, forneça qualquer formato de cor CSS válido (HEX, variável CSS, RGB, etc.).

Você pode encontrar a lista completa de propriedades no tema do grupo de botões. A sintaxe é a seguinte:

<igx-button-group
class="!light-button-group ![--item-background:#7B9E89]"
>
...
</igx-button-group>

Note

O ponto de exclamação(!) é necessário para garantir que a classe utilitária tenha prioridade. O Tailwind aplica estilos em camadas e, sem marcar esses estilos como importantes, eles serão substituídos pelo tema padrão do componente.