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.

Ejemplo de grupo de botones Angular

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';

@Component({
    selector: 'app-button-group-sample-1',
    styleUrls: ['./button-group-sample-1.component.scss'],
    templateUrl: './button-group-sample-1.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
})

export class ButtonGroupSample1Component {
    public rippleColor = 'grey';
}
tsコピー

<article class="sample-column">
    <igx-buttongroup>
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_align_left</igx-icon>
        </button>
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_align_center</igx-icon>
        </button>
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_align_right</igx-icon>
        </button>
        <button igxButton [igxRipple]="rippleColor" selected>
            <igx-icon>format_align_justify</igx-icon>
        </button>
    </igx-buttongroup>
</article>
htmlコピー

igx-buttongroup{
    display: inline-block;
    max-width: 400px;
}
scssコピー

Edit in: CodesandboxStackBlitz

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Introducción a Ignite UI for Angular grupo de botones

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
cmd

Para obtener una introducción completa al 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 {}
typescript

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

Ahora que tiene el módulo o las directivas de grupo de botones Ignite UI for Angular importado, puede comenzar con una configuración básica de los igx-buttongroup botones y sus botones.

Uso del componente Grupo de botones Angular

Agregar grupo de botones

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

Ejemplos

Alineación

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;
...
typescript

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

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';

@Component({
    selector: 'app-button-group-sample-2',
    styleUrls: ['./button-group-sample-2.component.scss'],
    templateUrl: './button-group-sample-2.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
})
export class ButtonGroupSample2Component {
    public alignment = ButtonGroupAlignment.vertical;
    public rippleColor = 'grey';
}
tsコピー

<article class="sample-column">
    <igx-buttongroup [alignment]="alignment">
        <button igxButton [igxRipple]="rippleColor">Sofia</button>
        <button igxButton [igxRipple]="rippleColor">London</button>
        <button igxButton selected [igxRipple]="rippleColor">New York</button>
        <button igxButton [igxRipple]="rippleColor">Tokyo</button>
    </igx-buttongroup>
</article>htmlコピー

igx-buttongroup{
    display: inline-block;
    width: 200px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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:

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { IgxRadioComponent, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent } from 'igniteui-angular';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-button-group-sample',
    styleUrls: ['./button-group-sample.component.scss'],
    templateUrl: './button-group-sample.component.html',
    imports: [IgxRadioComponent, FormsModule, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
})
export class ButtonGroupSampleComponent {
    public rippleColor = 'grey';
    public selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';
}
tsコピー

<article class="sample-column">
    <h6>Selection Mode</h6>
    <div class="radio-buttons">
        <igx-radio [(ngModel)]="selectionMode" value="single">Single</igx-radio>
        <igx-radio [(ngModel)]="selectionMode" value="singleRequired">Single-Required</igx-radio>
        <igx-radio [(ngModel)]="selectionMode" value="multi">Multi</igx-radio>
    </div>
    <igx-buttongroup [selectionMode]="selectionMode">
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_bold</igx-icon>
        </button>
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_italic</igx-icon>
        </button>
        <button igxButton [igxRipple]="rippleColor">
            <igx-icon>format_underlined</igx-icon>
        </button>
    </igx-buttongroup>
</article>htmlコピー

.sample-column,
.radio-buttons {
    display: flex;
    gap: 16px;
}

.sample-column {
    flex-direction: column;
    align-items: flex-start;
}
scssコピー

Edit in: CodesandboxStackBlitz

Tamaño

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);
}
scss

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

EXAMPLE

TS

HTML

SCSS

import { Component, HostBinding, OnInit } from '@angular/core';
import { IgxButtonGroupComponent } from 'igniteui-angular';

type Button = {
    label: string,
    selected: boolean,
    togglable: boolean
}

@Component({
    selector: 'app-button-group-sample-5',
    styleUrls: ['./button-group-sample-5.component.scss'],
    templateUrl: './button-group-sample-5.component.html',
    imports: [IgxButtonGroupComponent]
})
export class ButtonGroupSample5Component implements OnInit {
    public rippleColor = 'grey';
    public size = 'large';
    public sizes: Button[];

    public ngOnInit() {
        this.sizes = [
            { label: 'small', selected: this.size === 'small', togglable: true },
            { label: 'medium', selected: this.size === 'medium', togglable: true },
            { label: 'large', selected: this.size === 'large', togglable: true }
        ];
    }

    public selectSize(event: any) {
        this.size = this.sizes[event.index].label;
    }


    @HostBinding('style.--ig-size')
    protected get sizeStyle() {
        return `var(--ig-size-${this.size})`;
    }
}
tsコピー

<article class="sample-column">
    <igx-buttongroup [values]="sizes" (selected)="selectSize($event)"></igx-buttongroup>
</article>
htmlコピー

igx-buttongroup{
    display: inline-block;
}scssコピー

Edit in: CodesandboxStackBlitz

Botones de alternancia personalizados

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
        })
    ];
}
...
typescript

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

EXAMPLE

TS

HTML

SCSS

import { Component, OnInit } from '@angular/core';
import { IgxButtonGroupComponent } from 'igniteui-angular';

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

@Component({
    selector: 'app-button-group-sample-3',
    styleUrls: ['./button-group-sample-3.component.scss'],
    templateUrl: './button-group-sample-3.component.html',
    imports: [IgxButtonGroupComponent]
})
export class ButtonGroupSample3Component implements OnInit {
    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
            })
        ];
    }
}
tsコピー

<article class="sample-column">
    <igx-buttongroup [selectionMode]="'multi'" [values]="bordersButtons"></igx-buttongroup>
</article>htmlコピー

igx-buttongroup {
    display: inline-block;
    width: 300px;
}
scssコピー

Edit in: CodesandboxStackBlitz

Estilo

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';
scss

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,
);
scss

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.

El último paso es incluir el tema del componente.

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

Manifestación

EXAMPLE

TS

HTML

SCSS

import { Component } from '@angular/core';
import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular';

@Component({
    selector: 'app-button-group-style',
    styleUrls: ['./button-group-style.component.scss'],
    templateUrl: './button-group-style.component.html',
    imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRippleDirective]
})
export class ButtonGroupStyleComponent {
    public alignment = ButtonGroupAlignment.vertical;
}
tsコピー

<article class="sample-column">
    <igx-buttongroup [alignment]="alignment">
        <button igxButton igxRipple="white">Sofia</button>
        <button igxButton igxRipple="white">London</button>
        <button igxButton igxRipple="white">New York</button>
        <button igxButton igxRipple="white" disabled>Tokyo</button>
    </igx-buttongroup>
</article>
htmlコピー

@use "layout.scss" as *;
@use "igniteui-angular/theming" as *;

$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,
);

@include css-vars($custom-button-group);
 
scssコピー

Edit in: CodesandboxStackBlitz

Referencias de API

• Componente de grupo de botones Igx
• Estilos de grupo de botones Igx
• DirectivaBotónIgx
• Estilos de botones Igx

Dependencias temáticas

• Tema IgxIcon
• Tema IgxButton
• Tema IgxRipple

Recursos adicionales

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub