Descripción general del grupo de botones Web Components

The Web Components Button Group component is used to organize IgcToggleButtonComponent's into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.

Web Components Button Example

Usage

En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

npm install igniteui-webcomponents

Luego tendrás que importar elIgcButtonGroupComponent CSS necesario y registrar su módulo, así:

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

defineComponents(IgcButtonGroupComponent);

Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

Now that you have the Ignite UI for Web Components Button Group imported, you can start with a basic configuration of the IgcButtonGroupComponent and its buttons.

Use the IgcButtonGroupComponent selector to wrap your IgcToggleButtonComponents and display them into a button group. If you want a button to be selected by default, use the selected attribute:

 <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 the alignment property to set the orientation of the buttons in the button group.

Selección

In order to configure the Ignite UI for Web Components IgcButtonGroupComponent selection, you could use its selection property. This property accepts the following three modes:

único: modo de selección predeterminado del grupo de botones. El usuario puede seleccionar/deseleccionar un solo botón.
single-required: imita el comportamiento de un grupo de radio. Solo se puede seleccionar un botón y, una vez que se realiza la selección inicial, la deselección no es posible a través de la interacción del usuario.
Múltiple: se pueden seleccionar y anular la selección de varios botones del grupo.

The sample below demonstrates the exposed IgcButtonGroupComponent selection modes:

A IgcToggleButtonComponent could be marked as selected via its selected attribute or through the IgcButtonGroupComponent selectedItems attribute:

<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.

Tamaño

The --ig-size CSS custom property can be used to control the size of the button group.

Styling

The IgcButtonGroupComponent component exposes group CSS part that allows us to style the button group container. Also, the IgcToggleButtonComponents provide toggle CSS part that could be used to style the button element.

igc-button-group::part(group) {
  background-color: var(--ig-primary-500);
  padding: 8px;
}

igc-toggle-button::part(toggle) {
  color: var(--ig-secondary-300);
}