Blazor Radio y Grupo de Radio

    El componente Radio Ignite UI for Blazor permite al usuario seleccionar una sola 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 usar elIgbRadio y elIgbRadioGroup, debes registrarlos de la siguiente manera:

    // in Program.cs file

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

    También tendrás que vincular un archivo CSS adicional para aplicar el estilo a losIgbRadio y losIgbRadioGroup componentes. Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de ensamblador web de Blazor 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,IgbRadio simplemente coloca algo de texto entre las etiquetas de apertura y cierre:

    <IgbRadio>Apple</IgbRadio>

    Puedes especificar si la etiqueta debe colocarse antes o después delIgbRadio botón configurando ellabel-position atributo. Los valores permitidos sonbefore yafter (por defecto):

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

    TambiénIgbRadio pueden etiquetarse por elementos externos a él. En este caso, el usuario tiene control total para posicionar y estilizar la etiqueta según sus necesidades.

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

    Checked

    Puedes usar elchecked atributo para activar la radio.

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

    Invalid

    Puedes usar elinvalid atributo para marcar la radio como inválida.

    <IgbRadio Invalid="true" />

    Disabled

    Puedes usar eldisabled atributo para desactivar la radio.

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

    Group Alignment

    PermiteIgbRadioGroup cambiar fácilmente la dirección de colocación de los botones de radio que contiene usando elalignment atributo. Los valores permitidos sonvertical (por defecto) yhorizontal.

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

    Forms

    Puedes usar losname atributos yvalue cuando usas la radio conForm.

    <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

    ElIgbRadio componente expone varias partes CSS (base,control, andlabel) para darte control total sobre su estilo.

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

igc-radio-group {
  padding: 12px;
}

igc-radio::part(checked)::after {
  background-color: var(--ig-success-500);
}

igc-radio::part(label) {
  color: var(--ig-secondary-800);
}

    API References

    Additional Resources