React 스위치

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

    React Switch Example

    Usage

    At its core, the IgrSwitch 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 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>

    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):

    <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

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

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

    Required

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

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

    Invalid

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

    Disabled

    You can use the disabled attribute to disable the switch.

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

    Forms

    You can use the name and value attributes when using the switch with 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