Descripción general de los componentes Angular Radio y Radio Group

    Radio Button

    El componente Ignite UI for Angular botón de radio permite al usuario seleccionar una sola opción de un conjunto disponible de opciones 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 botón de radio, 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 importar elIgxRadioModule archivo en el app.module.ts.

    // app.module.ts

...
import { IgxRadioModule } from 'igniteui-angular/radio';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})
export class AppModule {
    public selected: any;
}

    Alternativamente,16.0.0 puedes importar losIgxRadioGroupDirective yIgxRadioComponent como dependencias independientes, o usar elIGX_RADIO_GROUP_DIRECTIVES token 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/radio';
// 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 tienes importado el módulo o directivas del botón de radio Ignite UI for Angular, puedes empezar a usar la directiva yigx-radio-group eligx-radio componente.

    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

    LalabelPosition propiedad puede usarse para cambiar la posición predeterminada de la etiqueta en el componente de radio. Los usuarios pueden elegir entrebefore y.after Si no se especifica, la etiqueta se colocará después del botón de radio.

    <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

    Vamos a mejorar la muestra anterior añadiendo cuatro botones de opción, cada uno responsable de aplicar un color concreto como fondo. Vincularemos la propiedad BackgroundColor de un elemento div a la propiedad selectedColor del componente. Notarás que selectedColor también participa en una relación vinculante bidireccional a través de laNgModel directiva, por lo que su valor se actualiza cada vez que el usuario selecciona un botón de opción diferente (color).

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

    Ten en cuenta que si no usas laNgModel directiva en un enlace de datos bidireccional, debes importarlaFormsModule y añadirla a la lista de importaciones del NgModule.

    El resultado final sería algo así:

    Estilismo

    Radio Theme Property Map

    Al modificar una propiedad principal, todas las propiedades dependientes relacionadas se actualizan automáticamente para reflejar el cambio:

    Propiedad principal Propiedad dependiente Descripción
    $empty-color
    		 $hover color Colores de borde y puntos al pasar el cursor
    $focus-contorno-color (índigo)Color del contorno de enfoque (tema índigo)
    $fill color
    		 $fill-color-flotador He comprobado el color de puntos al pasar el cursor
    $fill-borde-color flotante (no bootstrap)He comprobado el color del borde al pasar el cursor
    $focus-color de borde (bootstrap)Color del borde del foco
    $focus-contorno-color (bootstrap)Enfoque del color delineado
    $focus-contorno-color-relleno (índigo)Enfoca el color del contorno cuando la radio está llena
    $label-color $label-color-flotador Etiqueta color de texto al pasar el cursor
    $error color
    		 $error-color-flotador Etiqueta, borde y color de puntos en estado inválido al pasar el cursor
    $focus-esquema-color-errorColor del contorno de enfoque en estado inválido

    Para empezar a estilizar los botones de opción, 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 amplía elradio-theme. Proporcionando solo dos parámetros clave —$empty-colory$fill-color— puedes generar un botón de radio completamente estilizado. Estos valores sirven como base para el tema; al proporcionarlos, calculará automáticamente todos los colores de primer plano y fondo necesarios para varios estados (por ejemplo, pasar el cursor al cursor, seleccionado, desactivado).

    $custom-radio-theme: radio-theme(
    $empty-color:  #345779,
    $fill-color: #2dabe8,
);

    Finalmente, incluya el tema personalizado en su aplicación:

    @include css-vars($custom-radio-theme);

    Note

    En el ejemplo se usa el esquema de Fluent Light.

    Styling with Tailwind

    Puedes decorarlosradio button 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-radio,dark-radio.

    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 la radio. La sintaxis es la siguiente:

    <igx-radio
class="!light-radio ![--empty-color:#576E60] ![--fill-color:#7B9E89]"
...
>
  New York
</igx-radio>
    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.

    Al final, tu botón de radio debería verse así:

    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 controlados por plantillas.

    Demo

    Usage

    La Directiva de Grupos de Radio se exporta como unaNgModule, por lo que todo lo que tienes que hacer en tu solicitud es importar elIgxRadioModule archivo en el archivo app.module.ts:

    // app.module.ts
...
import { IgxRadioModule } from 'igniteui-angular/radio';
// import { IgxRadioModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxRadioModule],
    ...
})

    Para empezar, crea yigxRadioGroup añade variosigxRadio componentes.

    Nótese que, estableciendo unaname La 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

    Utiliza laalignment propiedad de entrada para cambiar la orientación de losigxRadio componentes en el grupo de radio. Los usuarios pueden elegir entrehorizontal y.vertical Por defecto, la alineación del grupo de radio es horizontal.

    //sample.component.ts
import { RadioGroupAlignment } from "igniteui-angular/radio";
...
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.