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.
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxButtonGroupModule,
IgxRippleModule,
IgxIconModule,
IgxButtonModule
} from "igniteui-angular" ;
import { ButtonGroupSample1Component } from "./button-group-sample-1/button-group-sample-1.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
ButtonGroupSample1Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxButtonGroupModule,
IgxRippleModule,
IgxIconModule,
IgxButtonModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
@Component ({
selector : 'app-button-group-sample-1' ,
styleUrls : ['./button-group-sample-1.component.scss' ],
templateUrl : './button-group-sample-1.component.html'
})
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 ]="true" >
<igx-icon > format_align_justify</igx-icon >
</button >
</igx-buttongroup >
</article >
html コピー igx-buttongroup{
display : inline-block;
max-width : 400px ;
}
scss コピー
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
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
cmd
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 .
...
import { IgxButtonGroupModule } from 'igniteui-angular' ;
@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.
...
import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular' ;
@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]
})
export class HomeComponent {}
typescript
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.
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
:
<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
Examples
Alignment
Utilice la propiedad de entrada alignment
para establecer la orientación de los botones en el grupo de botones.
import { ButtonGroupAlignment } from 'igniteui-angular' ;
...
public alignment = ButtonGroupAlignment.vertical;
...
typescript
<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
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxButtonGroupModule,
IgxButtonModule,
IgxRippleModule
} from "igniteui-angular" ;
import { ButtonGroupSample2Component } from "./button-group-sample-2/button-group-sample-2.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
ButtonGroupSample2Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxButtonGroupModule,
IgxButtonModule,
IgxRippleModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
import { ButtonGroupAlignment } from 'igniteui-angular' ;
@Component ({
selector : 'app-button-group-sample-2' ,
styleUrls : ['./button-group-sample-2.component.scss' ],
templateUrl : './button-group-sample-2.component.html'
})
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 ]="true" [igxRipple ]="rippleColor" > New York</button >
<button igxButton [igxRipple ]="rippleColor" > Tokyo</button >
</igx-buttongroup >
</article >
html コピー igx-buttongroup{
display : inline-block;
width : 200px ;
}
scss コピー
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:
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxButtonGroupModule,
IgxIconModule,
IgxButtonModule,
IgxRippleModule,
IgxRadioModule
} from "igniteui-angular" ;
import { ButtonGroupSampleComponent } from "./button-group-sample-4/button-group-sample.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
ButtonGroupSampleComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxButtonGroupModule,
IgxIconModule,
IgxButtonModule,
IgxRippleModule,
IgxRadioModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
@Component ({
selector : 'app-button-group-sample' ,
styleUrls : ['./button-group-sample.component.scss' ],
templateUrl : './button-group-sample.component.html'
})
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 コピー
Tamaño
La propiedad personalizada CSS--ig-size
se puede utilizar para controlar el tamaño del grupo de botones.
igx-buttongroup {
--ig-size: var(--ig-size-small);
}
scss
<igx-buttongroup > </igx-buttongroup >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxButtonGroupModule } from "igniteui-angular" ;
import { ButtonGroupSample5Component } from "./button-group-sample-5/button-group-sample-5.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
ButtonGroupSample5Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxButtonGroupModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, HostBinding, OnInit } from '@angular/core' ;
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'
})
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 コピー
Utilice la propiedad de entrada values
para establecer una serie de botones personalizados en el grupo de botones.
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
<igx-buttongroup [selectionMode ]="'multi'" [values ]="bordersButtons" > </igx-buttongroup >
html
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { IgxButtonGroupModule } from "igniteui-angular" ;
import { ButtonGroupSample3Component } from "./button-group-sample-3/button-group-sample-3.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
ButtonGroupSample3Component
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxButtonGroupModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component, OnInit } from '@angular/core' ;
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'
})
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 コピー
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 *;
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
Demo
import { NgModule } from "@angular/core" ;
import { FormsModule } from "@angular/forms" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import {
IgxButtonGroupModule,
IgxRippleModule,
IgxIconModule,
IgxButtonModule
} from "igniteui-angular" ;
import { ButtonGroupStyleComponent } from "./button-group-style/button-group-style.component" ;
@NgModule ({
bootstrap : [AppComponent],
declarations : [
AppComponent,
ButtonGroupStyleComponent
],
imports : [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
IgxButtonGroupModule,
IgxRippleModule,
IgxIconModule,
IgxButtonModule
],
providers : [],
schemas : []
})
export class AppModule {}
ts コピー import { Component } from '@angular/core' ;
import { ButtonGroupAlignment } from 'igniteui-angular' ;
@Component ({
selector : 'app-button-group-style' ,
styleUrls : ['./button-group-style.component.scss' ],
templateUrl : './button-group-style.component.html'
})
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 ]="true" > Tokyo</button >
</igx-buttongroup >
</article >
html コピー @use '../../variables' as *;
igx-buttongroup{
display : inline-block;
width : 200px ;
}
$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
);
:host ::ng-deep {
@include css-vars($custom-button-group );
}
scss コピー
API References
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.