Descripción general del grupo de botones React

El componente React grupo de botones se utiliza para organizar IgrToggleButton s en grupos de botones con estilo con alineación horizontal/vertical, selección única/múltiple y alternancia.

React Button Example

Usage

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

npm install igniteui-react

A continuación, tendrás que importar el IgrButtonGroup CSS necesario y registrar su módulo, de la siguiente manera:

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

IgrButtonModule.register();

Para obtener una introducción completa a Ignite UI for React, lea el tema Introducción.

Ahora que tiene el grupo de botones Ignite UI for React importado, puede comenzar con una configuración básica de los IgrButtonGroup botones y sus botones.

Utilice el IgrButtonGroup selector para ajustar sus IgrToggleButton s y mostrarlas en un grupo de botones. Si desea que un botón se seleccione de forma predeterminada, utilice el 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

Utilice la alignment propiedad para establecer la orientación de los botones del grupo de botones.

Selección

Para configurar la selección de Ignite UI for React IgrButtonGroup, puede utilizar su selection propiedad. Esta propiedad acepta los tres modos siguientes:

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

En el ejemplo siguiente se muestran los modos de selección expuestos IgrButtonGroup:

A IgrToggleButton se puede marcar como seleccionado a través de su selected atributo o a través de la función 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.

Tamaño

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

Styling

El IgrButtonGroup Exposiciones de componentes group CSS que nos permite estilizar el contenedor del grupo de botones. Además, el IgrToggleButton De esta manera, la mayoría de toggle CSS que podría usarse para diseñar el elemento button.