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 {}

Ahora que tienes importado el módulo o directivas Ignite UI for Angular Button Group, puedes empezar con una configuración básica de losigx-buttongroup y sus botones.

Using for Angular Button Group Component

Add Button Group

Usa eligx-buttongroup selector para envolver tus botones y mostrarlos en un grupo de botones. Si quieres que un botón esté seleccionado por defecto, usa laselected propiedad:

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

Usa laalignment propiedad de entrada para establecer la orientación de los botones en el grupo de botones.

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

Para configurar laigx-buttongroup selección, podrías 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 ejemplo siguiente muestra los modos de selección expuestosigx-buttongroup:

Tamaño

La--ig-size propiedad personalizada CSS puede usarse 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

Utiliza lavalues propiedad de entrada para establecer un conjunto 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

Button Group Theme Property Map

Cuando se establece un valor para la$item-background propiedad, todas las propiedades dependientes relacionadas que se enumeran en la tabla siguiente se actualizan automáticamente para mantener la consistencia visual. La tabla muestra qué propiedades se ven afectadas cuando personalizas la propiedad principal.

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.

Para empezar a estilizar el grupo de botones, necesitamos importar elindex archivo, donde están todas las funciones de tema y los componentes mezclados:

@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 sencillo, creamos un nuevo tema que extiende elbutton-group-theme y especifica solo el$item-background. En función de este valor, el tema calculará automáticamente los colores de estado apropiados, los primeros planos de contraste y los bordes para el grupo de botones. Por supuesto, sigues siendo libre de sobreescribir cualquier parámetro del tema con valores personalizados si es necesario.

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

Como se ha visto, exponebutton-group-theme algunos parámetros útiles para el estilo básico de sus elementos. Si quieres profundizar más y cambiar algunos parámetros específicos de los botones, puedes crear un nuevo tema que amplíe elbutton-theme botón y lo alcance bajo la clase de grupo de botones correspondiente.

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.