Web Components Checkbox 개요

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

체크박스 예

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

defineComponents(IgcCheckboxComponent);
export class CheckboxOverview {
    constructor() {
    }
}

new CheckboxOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox>Checkbox</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

이 샘플이 마음에 드시나요? 당사의 완전한 Ignite UI for Web Components 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

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

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

npm install igniteui-webcomponents
cmd

그런 다음 필요한 CSS인 IgcCheckboxComponent를 가져오고 다음과 같이 해당 모듈을 등록해야 합니다.

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

defineComponents(IgcCheckboxComponent);
ts

Ignite UI for Web Components에 대한 전체 소개를 보려면 시작하기 항목을 읽어보세요.

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

<igc-checkbox></igc-checkbox>
html

IgcCheckboxComponent 구성 요소는 표준 <form> 요소에서 작동하지 않습니다. 대신 Form을 사용합니다.

예

상표

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

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

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

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

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

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

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

defineComponents(IgcCheckboxComponent);
export class CheckboxLabel {
    constructor() {
    }
}

new CheckboxLabel();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Label</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <div class="wrapper">
        <span id="checkbox-label">Label</span>
        <igc-checkbox aria-labelledby="checkbox-label" label-position="before"></igc-checkbox>
      </div>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

.wrapper {
    display: flex;
    align-items: center;
}css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

체크됨

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

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

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

defineComponents(IgcCheckboxComponent);
export class CheckboxChecking {
    constructor() {
    }
}

new CheckboxChecking();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Checking</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox checked>Label</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

미정

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

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

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

defineComponents(IgcCheckboxComponent);
export class CheckboxIndeterminate {
    constructor() {
    }
}

new CheckboxIndeterminate();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Indeterminate</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox indeterminate>Label</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

필수의

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

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

유효하지 않은

invalid 속성을 사용하여 확인란을 잘못된 것으로 표시할 수 있습니다.

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

장애가 있는

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

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

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

defineComponents(IgcCheckboxComponent);
export class SwitchDisabled {
    constructor() {
    }
}

new SwitchDisabled();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Checkbox Disabled</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-checkbox disabled>Label</igc-checkbox>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

양식

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

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

스타일링

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

Web Components Checkbox 개요

체크박스 예

용법

예

상표

체크됨

미정

필수의

유효하지 않은

장애가 있는

양식

스타일링

API 참조

추가 리소스