Web Components 스위치

Ignite UI for Web Components Switch 구성 요소는 iOS의 Switch 구성 요소와 유사하게 동작하는 이진 선택 선택 구성 요소입니다.

Web Components 스위치 예제

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

defineComponents(IgcSwitchComponent);
export class SwitchOverview {
    constructor() {
    }
}

new SwitchOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Switch 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-switch>Switch</igc-switch>
    </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 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하기 시작하세요. 무료로 다운로드하세요.

용법

핵심적으로 IgcSwitchComponent 구성 요소는 켜기/끄기 상태 간 전환을 허용합니다. 기본 스타일은 머티리얼 디자인 지침의 선택 제어 사양에 따라 수행됩니다.

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

npm install igniteui-webcomponents
cmd

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

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

defineComponents(IgcSwitchComponent);
ts

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

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

<igc-switch></igc-switch>
html

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

예

상표

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

<igc-switch>Label</igc-switch>
html

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

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

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

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

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

defineComponents(IgcSwitchComponent);
export class SwitchLabel {
    constructor() {
    }
}

new SwitchLabel();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Switch 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="switch-label">Label</span>
        <igc-switch aria-labelledby="switch-label" label-position="before"></igc-switch>
      </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

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

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

체크됨

checked 속성을 사용하여 스위치를 켤 수 있습니다.

<igc-switch checked></igc-switch>
html

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

defineComponents(IgcSwitchComponent);
export class SwitchChecking {
    constructor() {
    }
}

new SwitchChecking();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Switch 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-switch checked>Label</igc-switch>
    </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-switch required></igc-switch>
html

유효하지 않은

invalid 속성을 사용하여 스위치를 잘못된 것으로 표시할 수 있습니다.

<igc-switch invalid></igc-switch>
html

장애가 있는

disabled 속성을 사용하여 스위치를 비활성화할 수 있습니다.

<igc-switch disabled></igc-switch>
html

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

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

new SwitchDisabled();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Switch 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-switch disabled>Label</igc-switch>
    </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

양식

switch를 함께 사용할 때 and 속성을 사용할 name 수 있습니다 Form. value

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

스타일링

구성 요소는 IgcSwitchComponent 스타일을 완전히 제어할 수 있도록 여러 CSS 부분을 노출합니다.

이름	설명
`base`	스위치의 기본 래퍼입니다.
`control`	switch 입력 요소입니다.
`thumb`	스위치의 위치 표시기입니다.
`label`	스위치 레이블입니다.

igc-switch::part(thumb) {
  background-color: var(--ig-success-500);
  box-shadow: none;
}

igc-switch::part(thumb checked) {
  background-color: var(--ig-gray-50);
}

igc-switch::part(control checked) {
  background-color: var(--ig-success-500);
}
css

Web Components 스위치