Blazor 체크박스 개요

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

    Checkbox Example

    Usage

    At its core, the IgbCheckbox allows for a choice between selected/unselected state. The default styling is done according to the selection controls specification in the Material Design guidelines.

    Before using the IgbCheckbox, you need to register it as follows:

    // in Program.cs file

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

    You will also need to link an additional CSS file to apply the styling to the IgbCheckbox component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

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

    The simplest way to start using the IgbCheckbox is as follows:

    <IgbCheckbox />

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

    Examples

    Label

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

    <IgbCheckbox>Label</IgbCheckbox>

    You can specify if the label should be positioned before or after the checkbox toggle by setting the label-position attribute of the checkbox. Allowed values are before and after (default):

    <IgbCheckbox LabelPosition="@ToggleLabelPosition.Before">Label</IgbCheckbox>

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

    <span id="checkbox-label">Label</span>
<IgbCheckbox AriaLabelledby="checkbox-label" />

    Checked

    You can use the Checked attribute of the component to determine whether the checkbox should be toggled on or off by default.

    <IgbCheckbox Checked="true" />

    Indeterminate

    You can use the Indeterminate property of the component to set the checkbox's value to neither true nor false.

    <IgbCheckbox Indeterminate="true" />

    Required

    You can use the Required property to mark the checkbox as required.

    <IgbCheckbox Required="true" />

    Invalid

    You can use the Invalid attribute to mark the checkbox as invalid.

    <IgbCheckbox Invalid="true" />

    Disabled

    You can use the Disabled attribute to disable the checkbox.

    <IgbCheckbox Disabled="true" />

    Forms

    You can use the Name and Value attributes when using the checkbox with Form.

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

    Styling

    The IgbCheckbox component exposes four CSS parts which we can use for styling:

    이름 설명
    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);
}

    API References

    Additional Resources