Blazor Radio y Grupo de Radio

    El componente Ignite UI for Blazor Radio permite al usuario seleccionar una única opción de un conjunto de opciones disponibles que se enumeran una al lado de la otra.

    Ignite UI for Blazor Radio Example

    Usage

    Antes de utilizar IgbRadio e IgbRadioGroup, debe registrarlos de la siguiente manera:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
  typeof(IgbRadioModule),
  typeof(IgbRadioGroupModule)
);

    También necesitará vincular un archivo CSS adicional para aplicar el estilo a los componentes IgbRadio e IgbRadioGroup. Es necesario colocar lo siguiente en el archivo wwwroot/index.html de un proyecto Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    [!WARNING] The IgbRadio component doesn't work with the standard <form> element. Use Form instead.

    Examples

    Label

    Para proporcionar una etiqueta significativa para IgbRadio, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:

    <IgbRadio>Apple</IgbRadio>

    Puede especificar si la etiqueta debe colocarse antes o después del botón IgbRadio configurando el atributo label-position. Los valores permitidos son before y after (predeterminado):

    <IgbRadio LabelPosition="@RadioLabelPosition.Before">Apple</IgbRadio>

    La IgbRadio también puede ser etiquetada por elementos externos a ella. En este caso, el usuario tiene control total para colocar y diseñar la etiqueta de acuerdo con sus necesidades.

    <span id="radio-label">Label</span>
<IgbRadio AriaLabelledBy="radio-label" />

    Checked

    Puede utilizar el atributo checked para activar la radio.

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio Checked="true">Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Invalid

    Puede utilizar el atributo invalid para marcar la radio como no válida.

    <IgbRadio Invalid="true" />

    Disabled

    Puede utilizar el atributo disabled para desactivar la radio.

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio Disabled="true">Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Group Alignment

    ​IgbRadioGroup le permite cambiar fácilmente la direccionalidad de ubicación de los botones de opción que contiene utilizando el atributo alignment. Los valores permitidos son vertical (predeterminado) y horizontal.

    <IgbRadioGroup Alignment="@RadioGroupAlignment.Horizontal">
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Forms

    Puede usar los name atributos y value cuando use la radio con Form.

    <IgbRadioGroup>
    <IgbRadio Name="fruit" Value="apple">Apple</IgbRadio>
    <IgbRadio Name="fruit" Value="banana">Banana</IgbRadio>
    <IgbRadio Name="fruit" Value="mango">Mango</IgbRadio>
    <IgbRadio Name="fruit" Value="orange">Orange</IgbRadio>
</IgbRadioGroup>

    Styling

    El componente IgbRadio expone varias partes CSS (base, control y label) para brindarle control total sobre su estilo. También puede modificar los colores de la paleta global para cambiar los colores del componente de radio:

    :root {
    --ig-primary-h: 60deg;
    --ig-primary-s: 100%;
    --ig-primary-l: 25%;
}

igc-radio::part(control) {
    --size: 18px;
}

    API References

    Additional Resources