React 스위치

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

    React Switch Example

    Usage

    핵심적으로 이IgrSwitch 컴포넌트는 온/오프 상태 간 전환을 허용합니다. 기본 스타일링은 머티리얼 디자인 가이드라인의 선택 제어 명세에 따라 이루어집니다.

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

    npm install igniteui-react

    그 다음에는 다음과 같이 필요한 CSS를IgrSwitch 가져오면 됩니다:

    import { IgrSwitch } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    <IgrSwitch></IgrSwitch>

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

    Examples

    Label

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

    <IgrSwitch><span>Label</span></IgrSwitch>

    스위치 토글labelPosition 앞에 라벨을 배치할지 스위치 속성으로 지정할 수 있습니다. 허용되는 값은 andbefore (after기본값):

    <IgrSwitch aria-labelledby="switchLabel" labelPosition="before" ><span id="switch-label">Label</span></IgrSwitch>

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

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

    Checked

    속성을 사용checked 해 스위치를 켜는 데 사용할 수 있습니다.

    <IgrSwitch checked={true}></IgrSwitch>

    Required

    속성 사용required으로 스위치를 필요로 표시할 수 있습니다.

    <IgrSwitch required={true}></IgrSwitch>

    Invalid

    스위치를 유효하지 않게 표시하는 속성으로invalid 표시할 수 있습니다.

    Disabled

    속성으로disabled 스위치를 비활성화할 수 있습니다.

    <IgrSwitch disabled="true"></IgrSwitch>

    Forms

    스위치name를 사용할 때 ANDvalue 속성을 사용할Form 수 있습니다.

    <IgrSwitch name="wifi" value="enabled"></IgrSwitch>

    Styling

    이 컴포넌트는IgrSwitch 스타일링을 완전히 제어할 수 있도록 여러 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