Descripción general de los componentes Angular Radio y Radio Group
Radio Button
El componente Ignite UI for Angular Radio Button permite al usuario seleccionar una única opción de un conjunto de opciones disponibles que se enumeran una al lado de la otra.
Angular Radio & Radio Group Example
Getting Started with Ignite UI for Angular Radio Button
Para comenzar con el componente Ignite UI for Angular Radio Button, 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 el IgxRadioModule
en el archivo app.module.ts.
// app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxRadioModule],
...
})
export class AppModule {
public selected: any;
}
Alternativamente, a partir de 16.0.0
, puede importar IgxRadioGroupDirective
e IgxRadioComponent
como dependencias independientes, o usar el token IGX_RADIO_GROUP_DIRECTIVES
para importar el componente y todos sus componentes y directivas de soporte.
// home.component.ts
import { FormsModule } from '@angular/forms';
import { IGX_RADIO_GROUP_DIRECTIVES } from 'igniteui-angular';
// import { IGX_RADIO_GROUP_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<igx-radio-group>
<igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
<igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
<igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
<igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
</igx-radio-group>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IGX_RADIO_GROUP_DIRECTIVES, FormsModule]
/* or imports: [IgxRadioComponent, IgxRadioGroupDirective, FormsModule] */
})
export class HomeComponent {
public selected: any;
}
Ahora que ha importado la Ignite UI for Angular, puede comenzar a usar la directiva igx-radio-group
y el componente igx-radio
.
Using the Angular Radio Button
Los botones de radio se pueden mostrar usando el siguiente código dentro de la plantilla del componente:
<igx-radio [(ngModel)]="selected" value="option1">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2">Option 2</igx-radio>
Label
La propiedad labelPosition
se puede utilizar para cambiar la posición predeterminada de la etiqueta en el componente de radio. Los usuarios pueden elegir entre before
y after
. Si no se especifica, la etiqueta se colocará después del botón de opción.
<igx-radio [(ngModel)]="selected" value="option1" labelPosition="before">Option 1</igx-radio>
<igx-radio [(ngModel)]="selected" value="option2" labelPosition="before">Option 2</igx-radio>
Properties
Mejoremos el ejemplo anterior agregando cuatro botones de opción, cada uno responsable de aplicar un color determinado como fondo. Vincularemos la propiedad backgroundColor de un elemento div a la propiedad selectedColor del componente. Notará que selectedColor también participa en una relación vinculante bidireccional a través de la directiva NgModel
, por lo tanto, su valor se actualiza cada vez que el usuario selecciona un botón de opción (color) diferente.
// radiogroup.component.ts
...
public colors = [{
hex: '#f06a2f',
name: 'Carrot'
}, {
hex: '#ff134a',
name: 'Watermelon'
}, {
hex: '#7bc96f',
name: 'Grass'
},
{
hex: 'transparent',
name: 'No color'
}];
public selectedColor: string = this.colors[3].hex;
<!--radiogroup.component.html-->
<igx-radio *ngFor="let color of colors"
name="color"
[value]="color.hex"
[(ngModel)]="selectedColor">
{{color.name}}
</igx-radio>
<div [style.background-color]="selectedColor">
...
</div>
Preste atención a que si no usa la directiva NgModel
en un enlace de datos bidireccional, debe importar FormsModule
y agregarlo a la lista de importaciones de NgModule.
El resultado final sería algo así:
Estilismo
Para comenzar a diseñar los botones de opción, 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 radio-theme
y acepta algunos de los parámetros del tema predeterminado:
$custom-radio-theme: radio-theme(
$disabled-color: lightgray,
$empty-color: #345779,
$fill-color: #2dabe8,
$fill-color-hover: #2dabe8,
$fill-hover-border-color: #2dabe8
);
Using CSS variables
El último paso es pasar el tema de radio personalizado en nuestra aplicación:
@include css-vars($custom-radio-theme);
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 radio($custom-radio-theme);
}
}
Radio Group
La directiva Ignite UI for Angular Radio Group proporciona un contenedor de agrupación que permite un mejor control sobre los componentes de radio secundarios y admite formularios reactivos y basados en plantillas.
Demo
Usage
La directiva de grupo de radio se exporta como NgModule
, por lo tanto, todo lo que necesita hacer en su aplicación es importar IgxRadioModule
en el archivo app.module.ts:
// app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxRadioModule],
...
})
Para comenzar, cree un igxRadioGroup
y agregue varios componentes igxRadio
.
Tenga en cuenta que, estableciendo un name
propiedad para el grupo de radio es obligatorio.
<!--radio-group.component.html-->
<igx-radio-group name="fruitsRadioGroup">
<igx-radio *ngFor="let fruit of fruits" value="{{fruit}}">
{{fruit}}
</igx-radio>
</igx-radio-group>
// radio-group.component.ts
public fruits = ["Apple", "Mango", "Banana", "Orange"];
Alignment
Utilice la propiedad de entrada alignment
para cambiar la orientación de los componentes igxRadio
en el grupo de radio. Los usuarios pueden elegir entre horizontal
y vertical
. De forma predeterminada, la alineación del grupo de radio es horizontal.
//sample.component.ts
import { RadioGroupAlignment } from "igniteui-angular";
...
public alignment = RadioGroupAlignment.vertical;
...
<!-- sample.component.html -->
<igx-radio-group [alignment]="alignment">
<igx-radio [(ngModel)]="selected" value="London">London</igx-radio>
<igx-radio [(ngModel)]="selected" value="New York">New York</igx-radio>
<igx-radio [(ngModel)]="selected" value="Tokyo">Tokyo</igx-radio>
<igx-radio [(ngModel)]="selected" value="Sofia">Sofia</igx-radio>
</igx-radio-group>
API References
Theming Dependencies
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.