Blazor 체크박스 개요

Blazor Checkbox는 Blazor 앱에 체크박스를 추가할 수 있는 구성 요소입니다. 표준 HTML 체크박스처럼 작동하여 사용자가 기본 선택 및 선택 취소 상태 또는 추가 불확정 상태를 선택할 수 있습니다. 또한 Blazor 체크박스 구성 요소의 스타일을 완벽하게 제어하고 폼과 함께 사용할 수 있습니다.

Checkbox 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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox>Checkbox</IgbCheckbox>
</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.

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

無料で試してみる

Usage

기본적으로 IgbCheckbox 선택/선택 취소 상태 중에서 선택할 수 있습니다. 기본 스타일은 머티리얼 디자인 지침의 선택 제어 사양에 따라 수행됩니다.

​IgbCheckbox 사용하기 전에 다음과 같이 등록해야 합니다.

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule));
razor

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

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

​IgbCheckbox 사용을 시작하는 가장 간단한 방법은 다음과 같습니다.

<IgbCheckbox />
razor

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

Examples

Label

확인란에 의미 있는 레이블을 제공하려면 여는 태그와 닫는 태그 사이에 텍스트를 배치하면 됩니다.

<IgbCheckbox>Label</IgbCheckbox>
razor

확인란의 label-position 속성을 설정하여 레이블을 확인란 토글 앞 또는 뒤에 배치해야 하는지 지정할 수 있습니다. 허용되는 값은 before과 after 입니다(기본값):

<IgbCheckbox LabelPosition="@CheckboxBaseLabelPosition.Before">Label</IgbCheckbox>
razor

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

<span id="checkbox-label">Label</span>
<IgbCheckbox AriaLabelledby="checkbox-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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <style>
        .wrapper {
            display: flex;
            align-items: center;
        }
    </style>

    <div class="wrapper">
        <span id="checkbox-label">Label</span>
        <IgbCheckbox AriaLabelledby="checkbox-label" LabelPosition=CheckboxBaseLabelPosition.Before />
    </div>
</div>

@code {
    

}razorコピー

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

Checked

구성 요소의 Checked 속성을 사용하여 확인란을 기본적으로 켜거나 끌지 여부를 결정할 수 있습니다.

<IgbCheckbox Checked="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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox Checked=true>Label</IgbCheckbox>
</div>

@code {
    

}razorコピー

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

Indeterminate

구성요소의 Indeterminate 속성을 사용하여 확인란의 값을 true 또는 false로 설정할 수 있습니다.

<IgbCheckbox Indeterminate="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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox Indeterminate=true>Label</IgbCheckbox>
</div>

@code {
    

}razorコピー

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

Required

​Required 속성을 사용하여 확인란을 필수로 표시할 수 있습니다.

<IgbCheckbox Required="true" />
razor

Invalid

​Invalid 속성을 사용하여 확인란을 유효하지 않은 것으로 표시할 수 있습니다.

<IgbCheckbox Invalid="true" />
razor

Disabled

​Disabled 속성을 사용하여 확인란을 비활성화할 수 있습니다.

<IgbCheckbox Disabled="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(IgbCheckboxModule));
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbCheckbox Disabled=true>Label</IgbCheckbox>
</div>

@code {
    

}razorコピー

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

Forms

확인란을 사용할 때 and 속성을 사용할 name 수 있습니다 Form. value​

<IgbCheckbox Name="wifi" Value="enabled" />
razor

Styling

이 컴포넌트는 IgbCheckbox 스타일링에 사용할 수 있는 4개의 CSS 부분을 노출합니다.

이름	설명
base	확인란의 기본 래퍼입니다.
control	확인란 입력 요소입니다.
indicator	확인란 표시기 아이콘입니다.
label	확인란 레이블입니다.

이 네 가지 CSS 부분을 통해 Checkbox 스타일을 완전히 제어할 수 있습니다.

igc-checkbox::part(indicator) {
  stroke: var(--ig-secondary-500-contrast);
}

igc-checkbox::part(control checked)::after {
  border-radius: 4px;
  background: var(--ig-secondary-500);
}
css

EXAMPLE

API References

• IgbCheckbox
• Checked
• Disabled
• Styling & Themes

Additional Resources

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브