Descripción general del grupo de botones Web Components

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

    Web Components Button Example

    Usage

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

    Luego tendrás que importar elIgcButtonGroupComponent CSS necesario y registrar su módulo, así:

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

defineComponents(IgcButtonGroupComponent);

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

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

    Usa elIgcButtonGroupComponent selector para envolver tuIgcToggleButtonComponent s y mostrarlos en un grupo de botones. Si quieres que un botón esté seleccionado por defecto, usa elselected 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

    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 Web ComponentsIgcButtonGroupComponent, 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 expuestosIgcButtonGroupComponent:

    AIgcToggleButtonComponent podía marcarse como seleccionado a través de suselected atributo o a través delIgcButtonGroupComponent 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--ig-size propiedad personalizada CSS puede usarse para controlar el tamaño del grupo de botones.

    Styling

    ElIgcButtonGroupComponent componente exponegroup la parte CSS que nos permite estilizar el contenedor del grupo de botones. Además, laIgcToggleButtonComponent 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