Web Components 스위치

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

    Web Components Switch Example

    Usage

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

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

    npm install igniteui-webcomponents

    그런 다음 다음과 같이 와 필요한 CSS를 가져와야 IgcSwitchComponent 합니다.

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

defineComponents(IgcSwitchComponent);

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

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

    <igc-switch></igc-switch>

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

    Examples

    Label

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

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

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

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

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

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

    Checked

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

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

    Required

    ​required 속성을 사용하여 스위치를 필수로 표시할 수 있습니다.

    <igc-switch required></igc-switch>

    Invalid

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

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

    Disabled

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

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

    Forms

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

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

    Styling

    구성 요소는 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);
}

    API References

    Additional Resources