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/switch';
// 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/switch';
// 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 {}

Now that you have the Ignite UI for Angular Switch module or component imported, you can start using the igx-switch component.

Using the Angular Switch

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

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

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

Switch properties

Let's enhance the code above by binding the switch properties to some data. Say, we have an array of settings objects, each having two properties - name and state. You can bind the switch component checked property to the underlying object state property. Analogically, you can bind the value property to 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

You can position the label using the switch's labelPosition property:

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

If the labelPosition is not set, the label will be positioned after the switch.

스타일링

Switch Theme Property Map

기본 속성을 수정하면 모든 관련 종속 속성이 자동으로 업데이트되어 변경 내용이 반영됩니다.

재료 유창한 부트스트랩 남빛

기본 속성	종속 속성	설명
$track색 어긋나	$thumb색 어긋나	스위치가 꺼져 있을 때 엄지 색
	$track-장애-컬러	스위치가 비활성화되었을 때 트랙 색상
$thumb색 어긋나	$track색 어긋나	스위치가 꺼져 있을 때의 트랙 색상
	$thumb-장애-컬러	스위치가 비활성화되었을 때 엄지 색상
$track 온 컬러	$thumb색	스위치가 켜져 있을 때 엄지 색깔
	$track 호버 컬러	스위치가 켜지고 떠돌았을 때의 트랙 색상
	$track 장애 색상	스위치가 켜지고 비활성화된 상태에서 선로 색상
$thumb색	$track 온 컬러	스위치가 켜져 있을 때 선로 색상
	$thumb 장애 색상	스위치가 켜져 있고 비활성화되었을 때 엄지 색깔

기본 속성	종속 속성	설명
$thumb색 어긋나	$border색	엄지손가락 오프 색상에서 파생된 테두리 색상
	$thumb-호버-컬러	호버 시 엄지 색상
$border색	$thumb색 어긋나	테두리 색상에서 유래한 엄지 중지 색상
	$border-호버-컬러	호버 시 테두리 색상
	$border-장애-색상	비활성화 시 테두리 색상
$track색 어긋나	$thumb색 어긋나	트랙 오프 색상에서 파생된 엄지 제거 색상
	$border-호버-컬러	호버 시 테두리 색상
	$track-장애-컬러	비활성화 시 트랙 색상
$track 온 컬러	$thumb색	스위치가 켜져 있을 때 엄지 색깔
	$thumb 장애 색상	스위치가 켜져 있고 비활성화된 엄지손가락 색깔
	$border-온 컬러	스위치가 켜져 있을 때의 테두리 색상
	$border 호버 컬러	스위치가 켜져 있고 마우스를 올렸을 때 테두리 색상
	$track 호버 컬러	스위치가 켜지고 떠돌았을 때의 트랙 색상
	$track 장애 색상	켜져 있고 비활성화했을 때 트랙 색상

기본 속성	종속 속성	설명
$thumb색 어긋나	$border색	엄지손가락 오프 색상에서 파생된 테두리 색상
	$thumb-호버-컬러	호버 시 엄지 색상
$border색	$thumb색 어긋나	테두리 색상에서 유래한 엄지 중지 색상
	$border-호버-컬러	호버 시 테두리 색상
	$border-장애-색상	비활성화 시 테두리 색상
$track색 어긋나	$thumb색 어긋나	트랙 오프 색상에서 파생된 엄지 제거 색상
	$border-호버-컬러	호버 시 테두리 색상
	$track-장애-컬러	비활성화 시 트랙 색상
$track 온 컬러	$thumb색	스위치가 켜져 있을 때 엄지 색깔
	$thumb 장애 색상	스위치가 켜져 있고 비활성화된 엄지손가락 색깔
	$border-온 컬러	스위치가 켜져 있을 때의 테두리 색상
	$border 호버 컬러	스위치가 켜져 있고 마우스를 올렸을 때 테두리 색상
	$track 호버 컬러	스위치가 켜지고 떠돌았을 때의 트랙 색상
	$track 장애 색상	켜져 있고 비활성화했을 때 트랙 색상
	$focus-필-컬러	스위치가 초점을 맞췄을 때 채우기 색상
$focus-필-컬러	$focus-윤곽-색상	초점 채움에서 파생된 윤곽선 색상
	$focus-채우기-호버-컬러	마우스를 올렸을 때 초점 채우기 색상

기본 속성	종속 속성	설명
$thumb색 어긋나	$border색	엄지손가락 오프 색상에서 파생된 테두리 색상
	$thumb-호버-컬러	호버 시 엄지 색상
$border색	$thumb색 어긋나	테두리 색상에서 유래한 엄지 중지 색상
	$border-호버-컬러	호버 시 테두리 색상
	$border-장애-색상	비활성화 시 테두리 색상
$track색 어긋나	$thumb색 어긋나	트랙 오프 색상에서 파생된 엄지 제거 색상
	$border-호버-컬러	호버 시 테두리 색상
	$track-장애-컬러	비활성화 시 트랙 색상
$track 온 컬러	$thumb색	스위치가 켜져 있을 때 엄지 색깔
	$thumb 장애 색상	스위치가 켜져 있고 비활성화된 엄지손가락 색깔
	$border-온 컬러	스위치가 켜져 있을 때의 테두리 색상
	$track 호버 컬러	스위치가 켜지고 떠돌았을 때의 트랙 색상
	$track 장애 색상	켜져 있고 비활성화했을 때 트랙 색상
$border-온 컬러	$border 호버 컬러	스위치가 켜져 있고 마우스를 올렸을 때 테두리 색상
	$focus-윤곽선-색상 집중	초점 초점 색상은 집중 상태를 나타내는 색상을 그려

To get started with styling the switch, we need to import the index file, where all the theme functions and component mixins live:

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

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

Then, we create a new theme that extends the switch-theme and by providing just two parameters - $thumb-off-color and $thumb-on-color you can get a fully styled switch, as the theme generates all the rest of the necessary colors based on these two, you can of course override any of the other parameters for a customized look:

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

마지막으로 애플리케이션에 사용자 지정 테마를 포함 합니다.

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

In the sample below, you can see how using the switch component with customized CSS variables allows you to create a design that visually resembles the switch used in the SAP UI5 design system.

Styling with Tailwind

저희의 맞춤형 Tailwind 유틸리티 클래스를 사용해 스위치를 스타일링할 수 있습니다. 먼저 Tailwind를 꼭 설정 하세요.

전역 스타일시트의 순풍 가져오기와 함께 다음과 같이 원하는 테마 유틸리티를 적용할 수 있습니다.

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

유틸리티 파일에는 테마 변형 두 가지light가dark 모두 포함되어 있습니다.

라이트 테마에는 클래스를 사용light-* 하세요.
어두운 테마에는 클래스를 사용dark-* 하세요.
접두사 뒤에 컴포넌트 이름을 덧붙이세요,light-switchdark-switch 예: .

이 클래스들이 적용되면 동적 테마 계산이 가능합니다. 그 다음에는 생성된 CSS 변수를 무arbitrary properties 시할 수 있습니다. 콜론 다음에는 유효한 CSS 색상 형식(HEX, CSS 변수, RGB 등)을 입력하세요.

전체 속성 목록은 IgxSwitch 테마에서 확인할 수 있습니다. 문법은 다음과 같습니다:

<igx-switch
  class="!light-switch ![--thumb-on-color:#FF4E00]"
  [checked]="true">
  ...
</igx-switch>

Note

느낌표(!)는 유틸리티 클래스가 우선순위가 되도록 보장하기 위해 필요합니다. Tailwind는 레이어에 스타일을 적용하는데, 이 스타일을 중요하게 표시하지 않으면 컴포넌트의 기본 테마에 의해 덮어쓰여집니다.

마지막에 스위치는 다음과 같이 보여야 합니다:

API References

Theming Dependencies

IgxRipple 테마

Additional Resources

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