Web Components Checkbox 개요

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

    Checkbox Example

    Usage

    본질적으로 선택IgcCheckboxComponent 된 상태와 선택하지 않은 상태 중 선택할 수 있게 합니다. 기본 스타일링은 머티리얼 디자인 가이드라인의 선택 제어 명세에 따라 이루어집니다.

    먼저 다음 명령을 실행하여 Ignite UI for Web Components 설치해야 합니다.

    npm install igniteui-webcomponents

    그 다음에는 필요한 CSS를 가져오IgcCheckboxComponent 고, 그 모듈을 등록해야 합니다. 다음과 같습니다:

    import { defineComponents, IgcCheckboxComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCheckboxComponent);

    Ignite UI for Web Components에 대한 완전한 소개는 '시작 주제'를 읽어보세요.

    사용하기 가장 간단한 방법은IgcCheckboxComponent 다음과 같습니다:

    <igc-checkbox></igc-checkbox>

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

    Examples

    Label

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

    <igc-checkbox>Label</igc-checkbox>

    체크박스 토글label-position 앞에 라벨을 배치할지 체크박스 속성으로 지정할 수 있습니다. 허용되는 값은 andbefore (after기본값):

    <igc-checkbox label-position="before">Label</igc-checkbox>

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

    <span id="checkbox-label">Label</span>
<igc-checkbox aria-labelledby="checkbox-label"></igc-checkbox>

    Checked

    컴포넌트의 속성을 사용checked 해 기본적으로 체크박스를 켜거나 꺼야 하는지 결정할 수 있습니다.

    <igc-checkbox checked></igc-checkbox>

    Indeterminate

    컴포넌트의 속성을 사용indeterminate 해 체크박스 값을 참도 거 짓도 아닌 상태로 설정할 수 있습니다.

    <igc-checkbox indeterminate></igc-checkbox>

    Required

    해당 부동산을 사용required 해 필수 체크박스를 표시할 수 있습니다.

    <igc-checkbox required></igc-checkbox>

    Invalid

    속성을 사용invalid 해 체크박스를 유효하지 않게 표시할 수 있습니다.

    <igc-checkbox invalid></igc-checkbox>

    Disabled

    이 속성을 사용disabled 해 체크박스를 비활성화할 수 있습니다.

    <igc-checkbox disabled></igc-checkbox>

    Forms

    다음에 사용할 수 있습니다.name 그리고value 체크박스를 사용할 때 속성을 사용합니다Form.

    <igc-checkbox name="wifi" value="enabled"></igc-checkbox>

    Styling

    이 컴포넌트는IgcCheckboxComponent 스타일링에 사용할 수 있는 네 개의 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);
}

    API References

    Additional Resources