Visão geral do grupo de botões React

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

    React Button Example

    Usage

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

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

    import { IgrButtonGroupModule, IgrButtonGroup } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrButtonModule.register();

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

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

    Use o IgrButtonGroup seletor para envolver seu IgrToggleButton 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:

    <IgrButtonGroup>
    <IgrToggleButton value="left" key="button-left">
        <IgrIcon name="format_align_left" collection="material" key="icon-left" />
        <IgrRipple key="ripple-left" />
    </IgrToggleButton>
    <IgrToggleButton value="center" key="button-center">
        <IgrIcon name="format_align_center" collection="material" key="icon-center" />
        <IgrRipple key="ripple-center" />
    </IgrToggleButton>
    <IgrToggleButton value="right" key="button-right">
        <IgrIcon name="format_align_right" collection="material" key="icon-right" />
        <IgrRipple key="ripple-right" />
    </IgrToggleButton>
    <IgrToggleButton value="justify" selected={true} key="button-justify">
        <IgrIcon name="format_align_justify" collection="material" key="icon-justify" />
        <IgrRipple key="ripple-justify" />
    </IgrToggleButton>
</IgrButtonGroup>

    Examples

    Alignment

    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 React IgrButtonGroup, 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 IgrButtonGroup:

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

    <IgrButtonGroup selectedItems={['bold']}>
    <IgrToggleButton value="bold" key="button-bold">
        <IgrIcon name="bold" collection="material" key="icon-bold" />
        <IgrRipple key="ripple-bold" />
    </IgrToggleButton>
    <IgrToggleButton value="italic" key="button-italic">
        <IgrIcon name="italic" collection="material" key="icon-italic" />
        <IgrRipple key="ripple-italic" />
    </IgrToggleButton>
    <IgrToggleButton value="underlined" key="button-underlined">
        <IgrIcon name="underlined" collection="material" key="icon-underlined" />
        <IgrRipple key="ripple-underlined" />
    </IgrToggleButton>
</IgrButtonGroup>

    [!Note] Setting IgrToggleButton value attribute is mandatory for using the selectedItems property of the IgrButtonGroup.

    Tamanho

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

    Styling

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

    API Reference

    Additional Resources