Web Components 스위치

    Ignite UI for Web Components iOS의 스위치 구성 요소와 유사하게 작동하는 바이너리 선택 선택 구성 요소입니다.

    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

    스위치 구성 요소는 여러 CSS 부분(base, control, thumb 및 label)을 노출하여 스타일을 완벽하게 제어할 수 있습니다.

    igc-switch::part(control) {
  background: beige;
  border-radius: 0;
}

igc-switch::part(thumb) {
  background: olive;
  border-radius: 2px;
  box-shadow: none;
}

    API References

    Additional Resources