Blazor 체크박스 개요

    Blazor 체크박스는 Blazor 앱에 체크박스를 추가할 수 있는 구성 요소입니다. 이는 표준 HTML 확인란처럼 작동하여 사용자가 기본 선택 및 선택 취소 상태 또는 추가 불확정 상태를 선택할 수 있도록 합니다. 또한 Blazor 확인란 구성 요소의 스타일과 이를 양식과 함께 사용하는 기능을 완전히 제어할 수 있습니다.

    Checkbox Example

    Usage

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

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

    // in Program.cs file

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

    또한 IgbCheckbox 구성 요소에 스타일을 적용하려면 추가 CSS 파일을 연결해야 합니다. 다음은 Blazor 웹 어셈블리 프로젝트의 wwwroot/index.html 파일 또는 Blazor Server 프로젝트의 Pages/_Host.cshtml 파일에 배치되어야 합니다.

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

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

    <IgbCheckbox />

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

    Examples

    Label

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

    <IgbCheckbox>Label</IgbCheckbox>

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

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

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

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

    Checked

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

    <IgbCheckbox Checked="true" />

    Indeterminate

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

    <IgbCheckbox Indeterminate="true" />

    Required

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

    <IgbCheckbox Required="true" />

    Invalid

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

    <IgbCheckbox Invalid="true" />

    Disabled

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

    <IgbCheckbox Disabled="true" />

    Forms

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

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

    Styling

    체크박스 구성 요소는 여러 CSS 부분(base, control, indicator 및 label)을 노출하여 스타일을 완벽하게 제어할 수 있습니다.

    igc-checkbox::part(indicator) {
  &::after {
    padding: 12px;
    border-radius: 14px;
  }
}

igc-checkbox::part(indicator checked) {
  border-radius: 0;

  &::after {
    background: olive;
    border-color: olive;
    stroke: beige;
  }
}

    API References

    Additional Resources