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.

    Ejemplo de Ignite UI for Blazor radio

    EXAMPLE
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(
      typeof(IgbRadioModule),
      typeof(IgbRadioGroupModule)
    );
    razor

    También deberá vincular un archivo CSS adicional para aplicar el estilo a los componentes y IgbRadioGroup. IgbRadio Lo siguiente debe colocarse en el archivo wwwroot/index.html de un proyecto de Blazor Web Assembly o en el archivo Pages/_Host.cshtml de un proyecto de Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    razor
    <IgbRadioGroup>
        <IgbRadio>Apple</IgbRadio>
        <IgbRadio>Banana</IgbRadio>
        <IgbRadio>Mango</IgbRadio>
        <IgbRadio>Orange</IgbRadio>
    </IgbRadioGroup>
    razor

    El componente IgbRadio no funciona con el elemento estándar <form>. En su lugar, utilice Formulario.

    Ejemplos

    Etiqueta

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

    <IgbRadio>Apple</IgbRadio>
    razor

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

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Comprobado

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Inválido

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

    <IgbRadio Invalid="true" />
    razor

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Desactivado

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Alineación de grupo

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

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Formularios

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

    Estilo

    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;
    }
    scss

    EXAMPLE
    MODULES
    RAZOR
    CSS

    Referencias de API

    Recursos adicionales