Angular 스위치 구성 요소 개요

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

    Angular Switch Example

    Getting Started with Ignite UI for Angular Switch

    Ignite UI for Angular Switch 구성 요소를 시작하려면 먼저 Ignite UI for Angular 설치해야 합니다. 기존 Angular 애플리케이션에서 다음 명령을 입력합니다.

    ng add igniteui-angular

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

    다음 단계는 IgxSwitchModule 당신의 app.module.ts 파일.

    // app.module.ts

...
import { IgxSwitchModule } from 'igniteui-angular';
// import { IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxSwitchModule],
    ...
})
export class AppModule {}

    또는 16.0.0부터 IgxSwitchComponent 독립형 종속성으로 가져올 수 있습니다.

    // home.component.ts

import { IgxSwitchComponent } from 'igniteui-angular';
// import { IgxSwitchComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-switch [checked]="true">
        Simple switch
    </igx-switch>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxSwitchComponent]
})
export class HomeComponent {}

    이제 Ignite UI for Angular 가져왔으므로 igx-switch 구성 요소 사용을 시작할 수 있습니다.

    Using the Angular Switch

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

    데모에 있는 것과 같은 간단한 스위치를 얻으려면 구성요소 템플릿 내에 다음 코드를 추가하세요.

    <igx-switch [checked]="true">
    Simple switch
</igx-switch>

    Switch properties

    스위치 속성을 일부 데이터에 바인딩하여 위의 코드를 개선해 보겠습니다. 예를 들어, 각각 name과 state 라는 두 가지 속성을 가진 설정 개체 배열이 있다고 가정해 보겠습니다. 스위치 구성 요소의 checked 속성을 기본 객체 상태 속성에 바인딩할 수 있습니다. 유사하게, value 속성을 name에 바인딩할 수 있습니다.

    // toggle.component.ts
...
public settings = [
    { name: 'WiFi', state: false},
    { name: 'Bluetooth', state: true},
    { name: 'Device visibility', state: false}
];

    각 설정에 대한 스위치를 추가한 다음 해당 속성을 바인딩하여 구성 요소 템플릿을 향상합니다.

    <!--toggle.component.html-->

<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
    {{ setting.name }}
</igx-switch>

    몇 가지 스타일을 추가하세요.

    :host {
    display: flex;
    flex-flow: column nowrap;
    padding: 16px;
}

igx-switch {
    margin-top: 24px;
}

    최종 결과는 다음과 같아야 합니다.

    Label Positioning

    스위치의 labelPosition 속성을 사용하여 라벨의 위치를 지정할 수 있습니다.

    <igx-switch labelPosition="before"></igx-switch>

    ​labelPosition이 설정되지 않은 경우 레이블은 스위치 뒤에 배치됩니다.

    스타일링

    스위치 스타일링을 시작하려면 모든 테마 기능과 구성 요소 믹스인이 있는 index 파일을 가져와야 합니다.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    그런 다음 switch-theme 확장하고 해당 매개변수 중 일부를 사용하여 스위치 항목의 스타일을 지정하는 새 테마를 만듭니다.

    // in styles.scss
$custom-switch-theme: switch-theme(
    $thumb-on-color: #ECAA53,
    $track-on-color: #F0CB9C
);

    Including Themes

    마지막 단계는 애플리케이션에 구성 요소 테마를 포함하는 것입니다.

    ​$legacy-support​ ​true로 설정된 경우 다음과 같은 구성 요소 테마를 포함합니다.

     @include switch($custom-switch-theme);
    Note

    구성 요소가 Emulated ViewEncapsulation을 사용하는 경우::ng-deep 사용하여 이 캡슐화를 penetrate 해야 합니다.

    :host {
    ::ng-deep {
        @include switch($custom-switch-theme);
    }
}

    ​$legacy-support​ ​false (기본값)로 설정된 경우 다음과 같은 구성 요소 CSS 변수를 포함합니다.

    @include css-vars($custom-switch-theme);
    Note

    구성 요소가 Emulated ViewEncapsulation을 사용하는 경우 변수를 재정의하려면 전역 선택기가 필요하므로 여전히:host 사용해야 합니다.

    :host {
    @include css-vars($custom-switch-theme);
}

    Demo

    API References

    Theming Dependencies

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.