Angular 스위치 구성 요소 개요

    Ignite UI for Angular는 iOS의 스위치 구성 요소와 비슷하게 동작하는 이진 선택 구성 요소입니다.

    Angular 스위치 예

    Ignite UI for Angular 스위치 시작하기

    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 구성 요소를 사용할 수 있습니다.

    Angular 스위치 사용

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

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

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

    스위치 속성

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

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

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

    


  {{ setting.name }}

--><!--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; }

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

    라벨 위치 지정

    스위치의 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 그리고 단지 두 개의 매개 변수를 제공함으로써 -$thumb-off-color 그리고 $thumb-on-color 테마가 이 두 가지를 기반으로 필요한 나머지 모든 색상을 생성하므로 완전히 스타일이 지정된 스위치를 얻을 수 있으며, 물론 사용자 정의 모양을 위해 다른 매개변수를 재정의할 수 있습니다.

    $custom-switch-theme: switch-theme( $thumb-off-color: #7cadd5, $thumb-on-color: #ecaa53, );

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

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

    Demo

    API 참조

    테마 종속성

    추가 리소스

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