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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div style="width: 25rem; border: 1px solid gainsboro">
        <IgbRadioGroup>
            <IgbRadio name="fruit">Apple</IgbRadio>
            <IgbRadio name="fruit" Checked="true">Banana</IgbRadio>
            <IgbRadio name="fruit">Mango</IgbRadio>
            <IgbRadio name="fruit">Orange</IgbRadio>
        </IgbRadioGroup>
    </div>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Usage

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

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

最速のデータ グリッド、高性能なチャート、すぐに使用できる機能のフルセットなどを含む 60 以上の再利用可能なコンポーネント を使用して、最新の Web エクスペリエンスを構築します。

無料で試してみる

Examples

Label

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

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbRadioGroup>
        <IgbRadio name="fruit" LabelPosition="RadioLabelPosition.Before" Value="apple">Apple</IgbRadio>
        <div style="display: flex; align-items: center">
            <span id="radio-label">Label</span>
            <IgbRadio name="fruit" LabelPosition="RadioLabelPosition.Before"
                       AriaLabelledby="radio-label"
                       Value="orange"></IgbRadio>
        </div>
    </IgbRadioGroup>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div style="width: 25rem; border: 1px solid gainsboro">
        <IgbRadioGroup>
            <IgbRadio name="fruit">Apple</IgbRadio>
            <IgbRadio name="fruit" Checked="true">Banana</IgbRadio>
            <IgbRadio name="fruit">Mango</IgbRadio>
            <IgbRadio name="fruit">Orange</IgbRadio>
        </IgbRadioGroup>
    </div>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

Invalid

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

<IgbRadio Invalid="true" />
razor

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical" style="width: 25rem; height: 1.5rem; border: 1px solid gainsboro">
    <IgbRadio Invalid="true">Invalid</IgbRadio>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical" >
    <div style="width: 25rem; border: 1px solid gainsboro">
        <IgbRadioGroup>
            <IgbRadio name="fruit">Apple</IgbRadio>
            <IgbRadio name="fruit" Disabled="true">Banana</IgbRadio>
            <IgbRadio name="fruit">Mango</IgbRadio>
            <IgbRadio name="fruit">Orange</IgbRadio>
        </IgbRadioGroup>
    </div>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

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

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule)
   );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical" style="width: 26.875rem; height: 1.5rem; border: 1px solid gainsboro">
    <IgbRadioGroup Alignment="RadioGroupAlignment.Horizontal">
        <IgbRadio name="fruit">Apple</IgbRadio>
        <IgbRadio name="fruit" Checked="true">Banana</IgbRadio>
        <IgbRadio name="fruit">Mango</IgbRadio>
        <IgbRadio name="fruit">Orange</IgbRadio>
    </IgbRadioGroup>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/cssコピー

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

Styling

El IgbRadio componente expone varias partes CSS (base, control, y label) para proporcionar un 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);
}
css

EXAMPLE

MODULES

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbRadioGroupModule),
                typeof(IgbRadioModule)
    );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

igc-radio::part(base checked):focus-within igc-radio::part(control) {
    background: rgba(128,128,0, .32);
}

igc-radio::part(control checked)::before {
    background: olive;
}

igc-radio::part(control checked)::after {
    border-color: olive;
}
</style>
<div class="container vertical">
    <div style="width: 16rem; border: 1px solid gainsboro">
        <style>
            :root {
                --igc-primary-h: 60deg;
                --igc-primary-s: 100%;
                --igc-primary-l: 25%;
            }

            igc-radio::part(control) {
                --size: 18px;
            }
        </style>
        <IgbRadioGroup>
            <IgbRadio name="fruit">Apple</IgbRadio>
            <IgbRadio name="fruit" Checked="true">Banana</IgbRadio>
            <IgbRadio name="fruit">Mango</IgbRadio>
            <IgbRadio name="fruit">Orange</IgbRadio>
        </IgbRadioGroup>
    </div>
</div>

@code {
    

}razorコピー

/* 
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/


igc-radio::part(base checked):focus-within igc-radio::part(control) {
    background: rgba(128,128,0, .32);
}

igc-radio::part(control checked)::before {
    background: olive;
}

igc-radio::part(control checked)::after {
    border-color: olive;
}cssコピー

API References

• IgbRadioGroup
• IgbRadio
• Styling & Themes

Additional Resources

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub