Información general sobre el grupo de botones de Web Components

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

    Web Components Button Example

    Usage

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    A continuación, tendrás que importar el IgcButtonGroupComponent CSS necesario y registrar su módulo, así:

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

defineComponents(IgcButtonGroupComponent);

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

    Ahora que tiene importado el grupo de botones Ignite UI for Web Components, puede comenzar con una configuración básica del IgcButtonGroupComponent y sus botones.

    Utilice el IgcButtonGroupComponent selector para ajustar las IgcToggleButtonComponent s y mostrarlas en un grupo de botones. Si desea que se seleccione un botón de forma predeterminada, utilice el selected atributo:

     <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

    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 Web Components IgcButtonGroupComponent, 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 IgcButtonGroupComponent:

    A IgcToggleButtonComponent se puede marcar como seleccionado a través de su selected atributo o a través de la función IgcButtonGroupComponent selectedItems atributo:

    <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

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

    Styling

    El IgcButtonGroupComponent componente expone group la parte CSS que nos permite diseñar el contenedor del grupo de botones. Además, la IgcToggleButtonComponent s proporciona toggle una parte CSS que se puede usar para aplicar estilo al elemento button.

    API Reference

    Additional Resources