Descripción general del grupo de botones React

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

    Ejemplo de botón React

    EXAMPLE
    TSX
    ButtonGroupOverview.css
    index.css

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

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

    npm install igniteui-react
    cmd

    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();
    tsx

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

    Ahora que ha importado la Ignite UI for React Button Group, puede comenzar con una configuración básica de IgrButtonGroup 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>
    tsx
    Ignite UI for React | CTA Banner

    Ejemplos

    Alineación

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

    EXAMPLE
    TSX
    ButtonGroupAlignment.css
    index.css

    Selección

    Para configurar la Ignite UI for React IgrButtonGroup, puede utilizar su propiedad selection. 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.

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

    EXAMPLE
    TSX
    ButtonGroupSelection.css
    index.css

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

    El establecimiento del atributo de valor IgrToggleButton es obligatorio para usar la propiedad selectedItems de IgrButtonGroup.

    Tamaño

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

    EXAMPLE
    TSX
    CSS

    Estilo

    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.

    EXAMPLE
    TSX
    ButtonGroupStyling.css
    index.css

    Referencia de API

    Recursos adicionales