Descripción general del componente del grupo de botones Angular

El componente Angular Button Group se utiliza para organizar botones en grupos de botones con estilos con alineación horizontal/vertical, selección única/múltiple y alternancia.

Angular Button Group Example

Getting Started with Ignite UI for Angular Button Group

Para comenzar con el componente Ignite UI for Angular Button Group, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular

Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxButtonGroupModule en su archivo app.module.ts.

// app.module.ts

...
import { IgxButtonGroupModule } from 'igniteui-angular';
// import { IgxButtonGroupModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxButtonGroupModule],
    ...
})
export class AppModule {}

Alternativamente, a partir de 16.0.0, puede importar IgxButtonGroupComponent como una dependencia independiente o usar el token IGX_BUTTON_GROUP_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

...
import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular';
// import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-buttongroup>
        <button igxButton>
            <igx-icon>format_align_left</igx-icon>
        </button>
        <button igxButton>
            <igx-icon>format_align_center</igx-icon>
        </button>
        <button igxButton>
            <igx-icon>format_align_right</igx-icon>
        </button>
        <button igxButton [selected]="true">
            <igx-icon>format_align_justify</igx-icon>
        </button>
    </igx-buttongroup>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent]
    /* or imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] */
})
export class HomeComponent {}

Ahora que tiene importadas las directivas o el módulo Ignite UI for Angular Button Group, puede comenzar con una configuración básica del igx-buttongroup y sus botones.

Using for Angular Button Group Component

Add Button Group

Utilice el selector igx-buttongroup para envolver sus botones y mostrarlos en un grupo de botones. Si desea que un botón se seleccione de forma predeterminada, utilice la propiedad selected:

<!-- sample.component.html -->
<igx-buttongroup>
    <button igxButton>
        <igx-icon>format_align_left</igx-icon>
    </button>
    <button igxButton>
        <igx-icon>format_align_center</igx-icon>
    </button>
    <button igxButton>
        <igx-icon>format_align_right</igx-icon>
    </button>
    <button igxButton [selected]="true">
        <igx-icon>format_align_justify</igx-icon>
    </button>
</igx-buttongroup>

Examples

Alignment

Utilice la propiedad de entrada alignment para establecer la orientación de los botones en el grupo de botones.

//sample.component.ts
import { ButtonGroupAlignment } from 'igniteui-angular';
// import { ButtonGroupAlignment } from '@infragistics/igniteui-angular'; for licensed package

...
public alignment = ButtonGroupAlignment.vertical;
...

<!-- sample.component.html -->
<igx-buttongroup [alignment]="alignment">
    <button igxButton>Sofia</button>
    <button igxButton>London</button>
    <button igxButton [selected]="true">New York</button>
    <button igxButton>Tokyo</button>
</igx-buttongroup>

Selección

Para configurar la selección igx-buttongroup, puede usar su propiedad SelectionMode. 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.
singleRequired: imita el comportamiento de un grupo de radio. Solo se puede seleccionar un botón y una vez realizada la selección inicial, no es posible anular la selección mediante la interacción del usuario.
multi: se pueden seleccionar y deseleccionar varios botones del grupo.

El siguiente ejemplo demuestra los modos de selección igx-buttongroup expuestos:

Tamaño (densidad de visualización)

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

/* sample.component.scss */
igx-buttongroup {
    --ig-size: var(--ig-size-small);
}

<!-- sample.component.html -->
<igx-buttongroup></igx-buttongroup>

Custom toggle buttons

Utilice la propiedad de entrada values para establecer una serie de botones personalizados en el grupo de botones.

// sample.component.ts

interface IButton {
    ripple?: string;
    label?: string;
    disabled?: boolean;
    togglable?: boolean;
    selected?: boolean;
    color?: string;
    icon?: string;
}

class ToggleButton {
    private ripple: string;
    private label: string;
    private disabled: boolean;
    private togglable: boolean;
    private selected: boolean;
    private color: string;
    private icon: string;

    constructor(obj?: IButton) {
        this.ripple = obj.ripple || 'gray';
        this.label = obj.label;
        this.selected = obj.selected || false;
        this.togglable = obj.togglable || true;
        this.disabled = obj.disabled || false;
        this.color = obj.color;
        this.icon = obj.icon;
    }
}
...
public bordersButtons: ToggleButton[];

public ngOnInit() {
    this.bordersButtons = [
        new ToggleButton({
            icon: 'border_top',
            selected: true
        }),
        new ToggleButton({
            icon: 'border_right',
            selected: false
        }),
        new ToggleButton({
            icon: 'border_bottom',
            selected: false
        }),
        new ToggleButton({
            icon: 'border_left',
            selected: false
        })
    ];
}
...

<!-- sample.component.html -->
<igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>

Estilismo

Para comenzar a diseñar el grupo de botones, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el button-group-theme y acepta algunos de los parámetros que dan estilo a los elementos del grupo de botones en sus diferentes estados.

$custom-button-group: button-group-theme(
    $item-text-color: #fdfdfd,
    $item-background: #2f4d6a,
    $item-hover-text-color: #fdfdfd,
    $item-hover-background: #1f3347,
    $item-selected-text-color: #fdfdfd,
    $item-selected-background: #1f3347,
    $item-selected-hover-background: #1f3347,
    $disabled-text-color: gray,
    $disabled-background-color: lightgray
);

Como se ve, el button-group-theme expone algunos parámetros útiles para el estilo básico de sus elementos. Si desea profundizar más y cambiar algunos parámetros específicos de los botones, puede crear un nuevo tema que amplíe el button-theme y lo acoja a la clase de grupo de botones respectiva.

Using CSS variables

El último paso es incluir el tema del componente.

@include css-vars($custom-button-group);

Using Theme Overrides

Para diseñar componentes para navegadores más antiguos, como Internet Explorer 11, tenemos que utilizar un enfoque diferente, ya que no admite variables CSS.

Si el componente utiliza Emulated ViewEncapsulation, es necesario penetrate esta encapsulación usando::ng-deep. Para evitar que el tema personalizado se filtre a otros componentes, asegúrese de incluir el selector:host antes de::ng-deep:

:host {
    ::ng-deep {
        @include button-group($custom-button-group);
    }
}