Visão geral do grupo de botões Web Components

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

Exemplo de botão Web Components

Uso

Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

npm install igniteui-webcomponents

Você precisará importar o IgcButtonGroupComponent CSS necessário e registrar seu módulo, assim:

import { defineComponents, IgcButtonGroupComponent } from "igniteui-webcomponents"; import 'igniteui-webcomponents/themes/light/bootstrap.css'; defineComponents(IgcButtonGroupComponent);

Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

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

Use o IgcButtonGroupComponent seletor para envolver seu IgcToggleButtonComponent 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:

<igc-button-group> <igc-toggle-button value="left"> <igc-icon name="format_align_left" collection="material"></igc-icon> <igc-ripple></igc-ripple> </igc-toggle-button> <igc-toggle-button value="center"> <igc-icon name="format_align_center" collection="material"></igc-icon> <igc-ripple></igc-ripple> </igc-toggle-button> <igc-toggle-button value="right"> <igc-icon name="format_align_right" collection="material"></igc-icon> <igc-ripple></igc-ripple> </igc-toggle-button> <igc-toggle-button value="justify" selected> <igc-icon name="format_align_justify" collection="material"></igc-icon> <igc-ripple></igc-ripple> </igc-toggle-button> </igc-button-group>

Exemplos

Alinhamento

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 Web Components IgcButtonGroupComponent, 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 IgcButtonGroupComponent:

A IgcToggleButtonComponent pode ser marcado como selecionado por meio de seu selected atributo ou por meio do IgcButtonGroupComponent selectedItems atributo:

<igc-button-group selected-items='["bold"]'> <igc-toggle-button value="bold"> <igc-icon name="bold" collection="material"></igc-icon> <igc-ripple></igc-ripple> </igc-toggle-button> <igc-toggle-button value="italic"> <igc-icon name="italic" collection="material"></igc-icon> <igc-ripple></igc-ripple> </igc-toggle-button> <igc-toggle-button value="underlined"> <igc-icon name="underlined" collection="material"></igc-icon> <igc-ripple></igc-ripple> </igc-toggle-button> </igc-button-group>

[! Observação] Configuração IgcToggleButtonComponent value é obrigatório para usar a selectedItems propriedade do IgcButtonGroupComponent.

Tamanho

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

Estilização

O IgcButtonGroupComponent componente expõe group a parte CSS que nos permite estilizar o contêiner do grupo de botões. Além disso, o IgcToggleButtonComponent 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); }