Descripción general del grupo de botones React

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

    React Button Example

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Entonces tendrás que importar elIgrButtonGroup CSS necesario y su contenido, así:

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

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

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

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

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

    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 React IgrButtonGroup 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 IgrButtonGroup selection modes:

    A IgrToggleButton could be marked as selected via its selected attribute or through the IgrButtonGroup selectedItems attribute:

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

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

    Tamaño

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

    Styling

    The IgrButtonGroup component exposes group CSS part that allows us to style the button group container. Also, the IgrToggleButtons 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);
}

    API Reference

    Additional Resources