Web Components Checkbox 개요

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

    Checkbox Example

    Usage

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

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

    npm install igniteui-webcomponents

    You will then need to import the IgcCheckboxComponent, its necessary CSS, and register its module, like so:

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

defineComponents(IgcCheckboxComponent);

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

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

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

    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):

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

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

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

    Checked

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

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

    Indeterminate

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

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

    Required

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

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

    Invalid

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

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

    Disabled

    You can use the disabled attribute to disable the checkbox.

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

    Forms

    You can use the name and value attributes when using the checkbox with Form.

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

    Styling

    The IgcCheckboxComponent 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