Blazor 라디오 & 라디오 그룹

Ignite UI for Blazor 사용하면 사용자는 나란히 나열된 사용 가능한 옵션 세트에서 단일 옵션을 선택할 수 있습니다.

Ignite UI for Blazor Radio Example

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

IgbRadio 및 IgbRadioGroup 사용하기 전에 다음과 같이 등록해야 합니다.

// in Program.cs file

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

또한 IgbRadio 및 IgbRadioGroup 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor Web Assembly 프로젝트의 wwwroot/index.html 파일이나 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치해야 합니다.

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

Examples

Label

IgbRadio에 의미 있는 라벨을 제공하려면 여는 태그와 닫는 태그 사이에 텍스트를 배치하면 됩니다.

<IgbRadio>Apple</IgbRadio>
razor

라벨을 위치 앞 또는 뒤에 배치해야 하는지 지정할 수 있습니다. IgbRadio 버튼을 설정하여 label-position 기인하다. 허용되는 값은 다음과 같습니다. before 그리고 after (기본):

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

IgbRadio는 외부 요소로 레이블을 지정할 수도 있습니다. 이 경우 사용자는 필요에 따라 라벨의 위치와 스타일을 지정할 수 있는 모든 권한을 갖게 됩니다.

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

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

checked 속성을 사용하여 라디오를 켤 수 있습니다.

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

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

invalid 속성을 사용하여 라디오를 잘못된 것으로 표시할 수 있습니다.

<IgbRadio Invalid="true" />
razor

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

disabled 속성을 사용하여 라디오를 비활성화할 수 있습니다.

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

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 사용하면 alignment 속성을 사용하여 포함된 라디오 버튼의 배치 방향을 쉽게 변경할 수 있습니다. 허용되는 값은 vertical (기본값) 및 horizontal 입니다.

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

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

라디오를 name 사용할 때 and value 속성을 사용할 수 있습니다 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

구성 요소는 IgbRadio 여러 CSS 부분(base, control, and label)을 노출하여 스타일을 완전히 제어할 수 있도록 합니다.

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

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