Descripción general del grupo de botones React

    El componente React Grupo de Botones se utiliza para organizarIgrToggleButton los grupos de botones con estilo con alineación horizontal/vertical, selección única/múltiple y alternación.

    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.

    Ahora que tienes importado el grupo de botones Ignite UI for React, puedes empezar con una configuración básica de yIgrButtonGroup sus botones.

    Usa elIgrButtonGroup selector para envolver tuIgrToggleButton s y mostrarlos en un grupo de botones. Si quieres que un botón esté seleccionado por defecto, usa elselected atributo:

    <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

    Usa laalignment propiedad para establecer la orientación de los botones en el grupo de botones.

    Selección

    Para configurar la selección de Ignite UI for ReactIgrButtonGroup, podrías usar suselection propiedad. Esta propiedad acepta los siguientes tres modos:

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

    El ejemplo siguiente muestra los modos de selección expuestosIgrButtonGroup:

    AIgrToggleButton podía marcarse como seleccionado a través de suselected atributo o a través delIgrButtonGroup selectedItems Atributo:

    <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

    La--ig-size propiedad personalizada CSS puede usarse para controlar el tamaño del grupo de botones.

    Styling

    ElIgrButtonGroup componente exponegroup la parte CSS que nos permite estilizar el contenedor del grupo de botones. Además, laIgrToggleButton s proporcionatoggle una parte CSS que podría usarse para estilizar el elemento del botón.

    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