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

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

    Web Components Button Example

    Usage

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

    npm install igniteui-webcomponents

    Você então precisará importar oIgcButtonGroupComponent 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 Comecando.

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

    Use oIgcButtonGroupComponent seletor para enrolar seuIgcToggleButtonComponent s e exibi-los em um grupo de botões. Se quiser que um botão seja selecionado por padrão, use oselected 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>

    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 Web ComponentsIgcButtonGroupComponent, 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 expostosIgcButtonGroupComponent:

    AIgcToggleButtonComponent poderia ser marcado como selecionado por meio de seuselected atributo ou através doIgcButtonGroupComponent 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>

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

    Tamanho

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

    Styling

    OIgcButtonGroupComponent componente expõegroup a parte CSS que nos permite estilizar o container do grupo de botões. Além disso, osIgcToggleButtonComponent 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