Web Components 스위치

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

    Web Components Switch Example

    Usage

    At its core, the IgcSwitchComponent component allows for toggling between on/off states. 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 IgcSwitchComponentand its necessary CSS, like so:

    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>

    You can specify if the label should be positioned before or after the switch toggle by setting the labelPosition attribute of the switch. Allowed values are before and after(default):

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

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

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

    Checked

    You can use the checked attribute to toggle on the switch.

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

    Required

    You can use the required attribute to mark the switch as required.

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

    Invalid

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

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

    Disabled

    You can use the disabled attribute to disable the switch.

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

    Forms

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

    <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