Descripción general del componente Grupo de botones Angular

El componente Grupo de botones Angular se utiliza para organizar los botones en grupos de botones con estilo, con alineación horizontal/vertical, selección simple/múltiple y alternancia.

Angular Button Group Example

Getting Started with Ignite UI for Angular Button Group

Para empezar a utilizar el componente Ignite UI for Angular grupo de botones, 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 al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importarlosIgxButtonGroupModule en tu archivo app.module.ts.

// app.module.ts

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

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

Alternativamente,16.0.0 puedes importarlosIgxButtonGroupComponent como una dependencia independiente, o usar elIGX_BUTTON_GROUP_DIRECTIVES token para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

...
import { IGX_BUTTON_GROUP_DIRECTIVES } from 'igniteui-angular/button-group';
import { IgxIconComponent } from 'igniteui-angular/icon';
// 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>
            <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 {}

Now that you have the Ignite UI for Angular Button Group module or directives imported, you can start with a basic configuration of the igx-buttongroup and its buttons.

Using for Angular Button Group Component

Add Button Group

Use the igx-buttongroup selector to wrap your buttons and display them into a button group. If you want a button to be selected by default, use the selected property:

<!-- 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>
    <igx-icon>format_align_justify</igx-icon>
  </button>
</igx-buttongroup>

Examples

Alignment

Use the alignment input property to set the orientation of the buttons in the button group.

//sample.component.ts
import { ButtonGroupAlignment } from 'igniteui-angular/button-group';
// 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>New York</button>
  <button igxButton>Tokyo</button>
</igx-buttongroup>

Selección

In order to configure the igx-buttongroup selection, you could use its selectionMode property. This property accepts the following three modes:

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

The sample below demonstrates the exposed igx-buttongroup selection modes:

Tamaño

The --ig-size CSS custom property can be used to control the size of the button group.

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

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

Custom toggle buttons

Use the values input property to set an array of customized buttons in the button group.

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

Button Group Theme Property Map

When you set a value for the $item-background property, all related dependent properties listed in the table below are automatically updated to maintain visual consistency. The table shows which properties are affected when you customize the primary property.

Propiedad principal	Propiedad dependiente	Descripción
$item antecedentes	$item-hover-background	El color de fondo flotante para los objetos.
	$item-seleccionado-fondo	El color de fondo seleccionado del objeto.
	Antecedentes $item	El color de fondo del objeto enfocado.
	$disabled-color de fondo	El color de fondo del objeto desactivado.
	$item-color de borde	El color del borde de los objetos.
	$item-text-color	El color del texto para los objetos.
	$idle-sombra-color	El color de sombra en reposo para los objetos.
$item-hover-background	$item-seleccionado-hover-background	El elemento seleccionado pasa el cursor al color de fondo.
	$item-fundo-centrado-de-flotante	El color de fondo enfocado flotante.
	$item-hover-text-color	El color del texto para los objetos flotados.
	$item-color-icono-flotante	El color de iconos para objetos flotados.
$item-seleccionado-fondo	$item-fundo-selecto-foco	El elemento seleccionado enfoca el color de fondo.
	$disabled-seleccionado-fondo	El discapacitado seleccionó el color de fondo.
	$item-selecto-texto-color	El color del texto para los elementos seleccionados.
	$item-icono-color-seleccionado	El color de iconos para los elementos seleccionados.
	$item-seleccionado-pasar-texto-color-	El color de texto para los elementos seleccionados flotando.
	$item-icono-color-seleccionado	El color de iconos para los objetos seleccionados flota.
$item-color de borde	$item-borde-color flotante	El color del borde para los objetos flotados.
	$item-borde-color enfocado	El color del borde para objetos enfocados.
	$item-color-borde-seleccionado	El color del borde de los elementos seleccionados.
	$item-color-borde-de pasar el cursor	El color del borde para los elementos seleccionados que flotan.
	$item-frontera-discapacitada	El color del borde para los objetos deshabilitados.
	$disabled-color-borde-seleccionado	El color del borde para los elementos seleccionados deshabilitados.

To get started with styling the button group, we need to import the index file, where all the theme functions and component mixins live:

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

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

Following the simplest approach, we create a new theme that extends the button-group-theme and specifying just the $item-background. Based on this value, the theme will automatically compute appropriate state colors, contrast foregrounds, and borders for the button group. Of course, you're still free to override any of the theme parameters with custom values if needed.

$custom-button-group: button-group-theme(
  $item-background: #57a5cd,
);

As seen, the button-group-theme exposes some useful parameters for basic styling of its items. If you want to drill deeper and change some button specific parameters, you can create a new theme that extends the button-theme and scope it under the respective button group class.

El último paso es incluir el tema del componente.

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

Demo

Styling with Tailwind

Puedes decorarlosbutton-group usando nuestras clases utilitarias personalizadas de Tailwind. Asegúrate de configurar primero a Tailwind.

Junto con la importación de viento de cola en su hoja de estilo global, puede aplicar las utilidades de tema deseadas de la siguiente manera:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

El archivo de utilidad incluye variantes tantolight comodark de tema.

Usalight-* clases para el tema ligero.
Usadark-* clases para el tema oscuro.
Añadir el nombre del componente después del prefijo, por ejemplo, ,light-button-group,dark-button-group.

Una vez aplicadas, estas clases permiten cálculos dinámicos de temas. Desde ahí, puedes anular las variables CSS generadas usandoarbitrary properties. Después de los dos puntos, proporciona cualquier formato de color CSS válido (HEX, variable CSS, RGB, etc.).

Puedes encontrar la lista completa de propiedades en el tema de grupo de botones. La sintaxis es la siguiente:

<igx-button-group
class="!light-button-group ![--item-background:#7B9E89]"
>
...
</igx-button-group>

Note

El signo de exclamación(!) es necesario para asegurar que la clase de utilidad tenga prioridad. Tailwind aplica estilos en capas y, sin marcar estos estilos como importantes, serán anulados por el tema predeterminado del componente.